{"componentChunkName":"component---src-templates-post-js","path":"/blog/move-miui-12-super-wallpaper-to-web","webpackCompilationHash":"0f979b9b09e9513b4912","result":{"data":{"site":{"siteMetadata":{"keywords":["blog","ubug","tech blog","技术博客","playground"]}},"mdx":{"fields":{"title":"🌏 把 MIUI 12 的超级火星搬到 Web 上","tips":[],"categories":["code"],"datetime":"2020-07-02 15:55:36","noFooter":false,"description":"当初 MIUI 12 发布时，超级壁纸功能着实看起来特别的有感觉，之前已经申请开发版内测，第一时间体验下来整个桌面到息屏的动画流畅，最后手机息屏之后一个火星在屏幕上还是挺震撼的。但，不就是个3D球吗！？","plainTextDescription":"当初 MIUI 12 发布时，超级壁纸功能着实看起来特别的有感觉，之前已经申请开发版内测，第一时间体验下来整个桌面到息屏的动画流畅，最后手机息屏之后一个火星在屏幕上还是挺震撼的。但，不就是个3D球吗！？\n","author":"Ubug","banner":{"childImageSharp":{"fluid":{"tracedSVG":"data:image/svg+xml,%3csvg%20xmlns='http://www.w3.org/2000/svg'%20width='400'%20height='128'%3e%3cpath%20d='M0%2064v64h401V0H0v64m124-45c-5%201-11%203-10%204l-1%201h-2l-4%203c-4%203-6%205-4%207%201%201%202%203%201%204%200%202%201%204%205%208l6%209c1%204%206%207%207%205%201-1%207%202%207%203l1%201c2-2%201-4-1-4l1-1c2-1%203-1%205%201s2%202%203%201c0-2%202-1%202%201v2l3%201%201-1%201-3c1-2%201-1%201%204%200%202%206%201%209-1l2-3v-1l1-1v-2h1l1%202%201%202c0%205%202%204%202-1%200-3%200-3%201-2%200%203%202%203%202%200l1-5%202-2v2l1%203v-4c-2-14-12-26-26-31-4-2-16-3-20-2m233%201l2%201c2%201%202%201-1%201l-2%202v1h-1l-1-1v7h1l2%201c0%202%202%202%206%202l6%201-2%201-4%201-4%201-4-2-3-1v6l-3-3c-1%200-2-4-1-6l-2-1h-2l-2-2c-1-1-2-2-1-3h1c1%201%205%200%205-1l-5-4c-6%200-7%200-7%203l2%203h2l-2%201c-2%200-2%200-2%2013l1%2012%203%202c2%201%202%201%203-1%200-1%201-2%202-1%201%200%205-3%205-5l-1-2-2-1c0-1%203%200%205%202%201%201%200%202-1%205l-1%204-2%202c-5%202-5%205%201%2010l3%204c0%202%203%205%206%205l1%202c0%203%203%205%205%204h3c1%202%201%202-1%202s-3%202-1%204l3%205%202%204c3%200%207-2%209-4l3-1c1%200%201%201-2%205s-4%205-4%209%200%205-2%206%202%202%209%202h7V81l-1-48V19h-15l-16%201m-54%207l-9%204c-2%202-5%203-6%202l-3%201%202%201c1%200%200%202-3%205-11%2012-16%2031-11%2038%205%205%209%205%208-1%200-3%201-4%204-2h3c3-3%206-8%206-10%201-3%203-3%203%200h3l-1-1v-2c0-1%200-2-2-2l-2-1%202-1c2%200%203-2%204-5%202-4%203-6%205-6%201%201%203-1%203-2l-1-1c-2%201-5-3-4-4l2%201h1l4-2%202-1%203-1h1l-3-3c-6-3-6-5%200-3h6c1%201%201%200%201-1%200-3-1-4-8-4-3-1-6%200-10%201m-80%2021l-5%201-1%201-2%201-2%201-2%205c-2%204-3%2011-1%2011l2%201c1%201%202%202%205%202h6c3%201%2010-1%2013-4%204-3%206-12%203-15-4-3-11-5-16-4M13%2082c-1%202%200%206%201%206v1c-4%203-2%205%205%205l6-1-2-1v-1c1-2%201-2-3-2l-3-1h3c4%200%204%200%204-3v-3c1-1%200-1-3-1l-5-1-3%202m18-1l-2%201c-2%200-2%200-1%201v2l1%202v2c-3%203-1%203%202%200l2-1-3%203-2%203%202-1h10V81c-1-1-1%201-1%205%200%206%200%206-2%206s-2-1-2-4l-2-4c-1-1-1-1%201-1s2%201%202%204l1%204%201-5c0-4%200-4-2-4l-4-1h-1m76%200l-1%207c0%206%200%206%203%206s3-1%203-4c0-4%200-4%202-2l3%201-1-2c-3-2-2-3%200-3s2%201%202%204c0%202%200%203-2%204-3%200-3%202%200%202%204-1%204-12%201-12-1%200-2%200-1-1l-1-1-2%202v2l-2-2c-2-2-2-2-4-1m16%201v1l1%201-1%201c-1%200-2%202-2%205l1%204%201-1h12l-4-1c-5%200-6-1-4-2h1l3%201h4v-5c0-5-1-5-3-5l-3%201-2%203-1-1%201-1v-1c-2-2-2-2-4%200m15%200c-2%205-1%207%202%207h3l-3%201c-3%202-3%202-1%202l2%201h8l2%201-1-2c-1-1-2-2-1-3v-5c0-3-1-3-3-3-3%200-4%200-3%204%200%203%200%204-1%203-2%200-2-1-1-3v-4c1-2-2-1-3%201m20-1c-5%200-5%200-5%203s0%204%203%205c2%201%202%201%200%201s-2%200%201%201l3%201h-4c-6%200-3%202%204%202%206%200%209-2%203-2-3%200-3%200-1-1%202%200%203-1%203-2v-1l1-3c0-4-1-5-8-4m11%202v4c-2%202-1%203%202%203h2l-2%201-3%201h2l3%201h6c1%202%203%200%203-2h-2c-1-3-1-4%201-4v-1h-1l-1-2%202-2c1-1%200-1-3-1l-6%202v-1c0-3-1-3-3%201'%20fill='%23573ede'%20fill-rule='evenodd'/%3e%3c/svg%3e","aspectRatio":3.1218905472636815,"src":"/static/5ced1533e64532fcef1ef1fb54dbf043/0ea4e/banner.jpg","srcSet":"/static/5ced1533e64532fcef1ef1fb54dbf043/9e575/banner.jpg 500w,\n/static/5ced1533e64532fcef1ef1fb54dbf043/79449/banner.jpg 1000w,\n/static/5ced1533e64532fcef1ef1fb54dbf043/0ea4e/banner.jpg 2000w,\n/static/5ced1533e64532fcef1ef1fb54dbf043/4f9b6/banner.jpg 2510w","srcWebp":"/static/5ced1533e64532fcef1ef1fb54dbf043/e1a1e/banner.webp","srcSetWebp":"/static/5ced1533e64532fcef1ef1fb54dbf043/7fe04/banner.webp 500w,\n/static/5ced1533e64532fcef1ef1fb54dbf043/d619e/banner.webp 1000w,\n/static/5ced1533e64532fcef1ef1fb54dbf043/e1a1e/banner.webp 2000w,\n/static/5ced1533e64532fcef1ef1fb54dbf043/ed022/banner.webp 2510w","sizes":"(max-width: 2000px) 100vw, 2000px"}}},"bannerCredit":null,"slug":"/blog/move-miui-12-super-wallpaper-to-web","tags":["Three.js","3D","Mars"]},"headings":[{"value":"一、技术实现","depth":2},{"value":"二、资源获取","depth":2},{"value":"素材列表","depth":3},{"value":"三、搭建俯瞰和侧面视角","depth":2},{"value":"1. 相机","depth":3},{"value":"2. 球、贴图和自转","depth":3},{"value":"3. 太阳和轨道","depth":3},{"value":"4. 转场","depth":3},{"value":"四、第三个场景","depth":2},{"value":"1. 场景实现","depth":3},{"value":"2. 模型和贴图","depth":3},{"value":"五、模型、贴图优化和注意事项","depth":2},{"value":"贴图大小问题","depth":3},{"value":"fbx 模型贴图闪烁问题","depth":3},{"value":"glTF 模型的颜色空间","depth":3}],"body":"const _excluded = [\"components\"];\nfunction _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }\nfunction _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) o = n[r], -1 === t.indexOf(o) && {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }\nfunction _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }\n/* @jsx mdx */\n\nconst _frontmatter = {\n \"slug\": \"move-miui-12-super-wallpaper-to-web\",\n \"title\": \"🌏 把 MIUI 12 的超级火星搬到 Web 上\",\n \"date\": \"2020-07-02 15:55:36\",\n \"author\": \"Ubug\",\n \"description\": \"当初 MIUI 12 发布时，超级壁纸功能着实看起来特别的有感觉，之前已经申请开发版内测，第一时间体验下来整个桌面到息屏的动画流畅，最后手机息屏之后一个火星在屏幕上还是挺震撼的。但，不就是个3D球吗！？\",\n \"categories\": [\"code\"],\n \"tags\": [\"Three.js\", \"3D\", \"Mars\"],\n \"banner\": \"./banner.jpg\"\n};\nconst makeShortcode = name => function MDXDefaultShortcode(props) {\n console.warn(\"Component \" + name + \" was not imported, exported, or provided by MDXProvider as global scope\");\n return mdx(\"div\", props);\n};\nconst WithFigcaption = makeShortcode(\"WithFigcaption\");\nconst SourceCodeLink = makeShortcode(\"SourceCodeLink\");\nconst layoutProps = {\n _frontmatter\n};\nconst MDXLayout = \"wrapper\";\nreturn function MDXContent(_ref) {\n let {\n components\n } = _ref,\n props = _objectWithoutProperties(_ref, _excluded);\n return mdx(MDXLayout, _extends({}, layoutProps, props, {\n components: components,\n mdxType: \"MDXLayout\"\n }), mdx(\"p\", null, \"\\u5F53\\u521D MIUI 12 \\u53D1\\u5E03\\u65F6\\uFF0C\\u8D85\\u7EA7\\u58C1\\u7EB8\\u529F\\u80FD\\u7740\\u5B9E\\u770B\\u8D77\\u6765\\u7279\\u522B\\u7684\\u6709\\u611F\\u89C9\\uFF0C\\u4E4B\\u524D\\u5DF2\\u7ECF\\u7533\\u8BF7\\u5F00\\u53D1\\u7248\\u5185\\u6D4B\\uFF0C\\u7B2C\\u4E00\\u65F6\\u95F4\\u4F53\\u9A8C\\u4E0B\\u6765\\u6574\\u4E2A\\u684C\\u9762\\u5230\\u606F\\u5C4F\\u7684\\u52A8\\u753B\\u6D41\\u7545\\uFF0C\\u6700\\u540E\\u624B\\u673A\\u606F\\u5C4F\\u4E4B\\u540E\\u4E00\\u4E2A\\u706B\\u661F\\u5728\\u5C4F\\u5E55\\u4E0A\\u8FD8\\u662F\\u633A\\u9707\\u64BC\\u7684\\u3002\"), mdx(\"p\", null, mdx(\"figure\", {\n parentName: \"p\",\n \"className\": \"gatsby-resp-image-figure\",\n \"style\": {}\n }, \"\\n \", mdx(\"span\", {\n parentName: \"figure\",\n \"className\": \"gatsby-resp-image-wrapper\",\n \"style\": {\n \"position\": \"relative\",\n \"display\": \"block\",\n \"marginLeft\": \"auto\",\n \"marginRight\": \"auto\",\n \"maxWidth\": \"1019px\"\n }\n }, \"\\n \", mdx(\"a\", {\n parentName: \"span\",\n \"className\": \"gatsby-resp-image-link\",\n \"href\": \"/static/cdec94a30383adbe2141fbdd573fab9e/48993/miui-12-wallpaper.jpg\",\n \"style\": {\n \"display\": \"block\"\n },\n \"target\": \"_blank\",\n \"rel\": [\"noopener\"]\n }, \"\\n \", mdx(\"span\", {\n parentName: \"a\",\n \"className\": \"gatsby-resp-image-background-image\",\n \"style\": {\n \"paddingBottom\": \"62.934362934362944%\",\n \"position\": \"relative\",\n \"bottom\": \"0\",\n \"left\": \"0\",\n \"backgroundImage\": \"url('data:image/jpeg;base64,/9j/2wBDABALDA4MChAODQ4SERATGCgaGBYWGDEjJR0oOjM9PDkzODdASFxOQERXRTc4UG1RV19iZ2hnPk1xeXBkeFxlZ2P/2wBDARESEhgVGC8aGi9jQjhCY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2P/wgARCAANABQDASIAAhEBAxEB/8QAFwAAAwEAAAAAAAAAAAAAAAAAAAQFA//EABQBAQAAAAAAAAAAAAAAAAAAAAP/2gAMAwEAAhADEAAAAYbuVInhDAg//8QAHBAAAQQDAQAAAAAAAAAAAAAAAQIDESEEEjEy/9oACAEBAAEFAkJ2JxqIgtcmnff/xAAYEQEAAwEAAAAAAAAAAAAAAAABAAMRIf/aAAgBAwEBPwGusTsTGf/EABcRAAMBAAAAAAAAAAAAAAAAAAABAhH/2gAIAQIBAT8Bu2jT/8QAGxAAAgEFAAAAAAAAAAAAAAAAABEBECEycYH/2gAIAQEABj8CRnfQpO1//8QAGxABAAICAwAAAAAAAAAAAAAAAQAREDFBYXH/2gAIAQEAAT8hUxR3B08GGYKTGum9ynCf/9oADAMBAAIAAwAAABBX3//EABYRAQEBAAAAAAAAAAAAAAAAAAARAf/aAAgBAwEBPxC2KmP/xAAWEQEBAQAAAAAAAAAAAAAAAAABEQD/2gAIAQIBAT8QQhii7//EABoQAQADAQEBAAAAAAAAAAAAAAEAETEhQaH/2gAIAQEAAT8QTAPVhDULmygP2Y0AkN88aNk9oBsuVjJ//9k=')\",\n \"backgroundSize\": \"cover\",\n \"display\": \"block\"\n }\n }), \"\\n \", mdx(\"img\", {\n parentName: \"a\",\n \"className\": \"gatsby-resp-image-image\",\n \"alt\": \"miui 12\",\n \"title\": \"miui 12\",\n \"src\": \"/static/cdec94a30383adbe2141fbdd573fab9e/48993/miui-12-wallpaper.jpg\",\n \"srcSet\": [\"/static/cdec94a30383adbe2141fbdd573fab9e/fca29/miui-12-wallpaper.jpg 259w\", \"/static/cdec94a30383adbe2141fbdd573fab9e/f4507/miui-12-wallpaper.jpg 518w\", \"/static/cdec94a30383adbe2141fbdd573fab9e/48993/miui-12-wallpaper.jpg 1019w\"],\n \"sizes\": \"(max-width: 1019px) 100vw, 1019px\",\n \"style\": {\n \"width\": \"100%\",\n \"height\": \"100%\",\n \"margin\": \"0\",\n \"verticalAlign\": \"middle\",\n \"position\": \"absolute\",\n \"top\": \"0\",\n \"left\": \"0\"\n },\n \"loading\": \"lazy\"\n }), \"\\n \"), \"\\n \"), \"\\n \", mdx(\"figcaption\", {\n parentName: \"figure\",\n \"className\": \"gatsby-resp-image-figcaption\"\n }, \"miui 12\"), \"\\n \")), mdx(\"p\", null, \"\\u8FD9\\u51E0\\u5929\\u77A5\\u5230\\u5BA3\\u4F20\\u56FE\\u7A81\\u53D1\\u5947\\u60F3\\uFF0C\\u4E0D\\u5C31\\u662F\\u4E2A3D\\u7403\\u5417\\uFF1FWEB \\u4E0A\\u597D\\u50CF\\u4E5F\\u80FD\\u5B9E\\u73B0\\uFF0C\\u8981\\u4E0D\\u8BD5\\u8BD5\\uFF1F\"), mdx(\"p\", null, mdx(\"strong\", {\n parentName: \"p\"\n }, \"\\u9884\\u89C8\\u53EF\\u6233(16MB \\u5DE6\\u53F3\\uFF0C\\u722A\\u673A\\u614E\\u70B9\\uFF0C\\u6E90\\u7801\\u5728\\u6700\\u540E)\\uFF1A\"), \" \", mdx(\"a\", {\n parentName: \"p\",\n \"href\": \"https://p.ubug.io/super-wallpaper/index.html\"\n }, \"\\u8D85\\u7EA7\\u706B\\u661F\")), mdx(\"div\", {\n style: {\n display: 'flex',\n justifyContent: 'center'\n }\n }, mdx(WithFigcaption, {\n title: \"WEB \\u7248\\u672C\\u8D85\\u7EA7\\u58C1\\u7EB8\",\n mdxType: \"WithFigcaption\"\n }, mdx(\"video\", {\n controls: true,\n autoPlay: true,\n muted: true,\n loop: true,\n style: {\n maxHeight: \"400px\",\n maxWidth: \"100%\"\n }\n }, mdx(\"source\", {\n src: \"https://fdb.ubug.io/storybook-videos/super-globe-web.mp4\",\n type: \"video/mp4\"\n })))), mdx(\"h2\", null, \"\\u4E00\\u3001\\u6280\\u672F\\u5B9E\\u73B0\"), mdx(\"div\", {\n style: {\n display: 'flex',\n justifyContent: 'center'\n }\n }, mdx(WithFigcaption, {\n title: \"MIUI 12 \\u8D85\\u7EA7\\u58C1\\u7EB8\",\n mdxType: \"WithFigcaption\"\n }, mdx(\"video\", {\n controls: true,\n autoPlay: true,\n muted: true,\n loop: true,\n style: {\n maxHeight: \"400px\",\n maxWidth: \"100%\"\n }\n }, mdx(\"source\", {\n src: \"https://fdb.ubug.io/storybook-videos/super-globe-ori.mp4\",\n type: \"video/mp4\"\n })))), mdx(\"p\", null, \"\\u6574\\u4E2A\\u5185\\u5BB9\\u5305\\u62EC\\u4FEF\\u77B0\\u7684\\u4E00\\u4E2A\\u89C6\\u89D2\\u3001\\u4E00\\u4E2A\\u4FA7\\u9762\\u90E8\\u5206\\u89C6\\u89D2\\u3001\\u4E00\\u4E2A\\u8F6C\\u573A\\u5230\\u76EE\\u6807\\u4F4D\\u7F6E\\u7684\\u89C6\\u89D2\\u3002\"), mdx(\"p\", null, \"\\u5168\\u90E8\\u90FD\\u662F 3D \\u7684\\u5185\\u5BB9\\uFF0C\\u6240\\u4EE5\\u8FD9\\u5757\\u4E00\\u5B9A\\u8981\\u7528 Three.js \\u4E86\\uFF0C\\u80FD\\u628A\\u6574\\u4E2A\\u5B9E\\u73B0\\u96BE\\u5EA6\\u964D\\u4F4E\\u5F88\\u591A\\u3002\"), mdx(\"p\", null, \"\\u7B2C\\u4E00\\u548C\\u7B2C\\u4E8C\\u4E2A\\u89C6\\u89D2\\u53EA\\u9700\\u8981\\u5C06\\u8D34\\u56FE\\u8499\\u5728\\u7403\\u4E0A\\uFF0C\\u8BBE\\u7F6E\\u706F\\u5149\\u3001\\u65CB\\u8F6C\\u548C\\u89D2\\u5EA6\\u5E94\\u8BE5\\u5C31\\u80FD\\u5B9E\\u73B0\\u6574\\u4F53\\u6548\\u679C\\uFF0C\\u5728\\u8C03\\u6574\\u76F8\\u673A\\u548C\\u706F\\u5149\\u7684\\u4F4D\\u7F6E\\uFF0C\\u80FD\\u591F\\u5B9E\\u73B0\\u521D\\u6B65\\u7684\\u8F6C\\u573A\\u3002\"), mdx(\"p\", null, \"\\u7B2C\\u4E09\\u4E2A\\u89C6\\u89D2\\u5E94\\u8BE5\\u662F\\u72EC\\u7ACB\\u7684\\u573A\\u666F\\uFF0C\\u9700\\u8981\\u4E00\\u4E2A\\u5730\\u5F62\\u7ED3\\u6784\\u548C\\u8D34\\u56FE\\uFF0C\\u914D\\u5408\\u89C6\\u89D2\\u53D8\\u5316\\u7684\\u8F6C\\u573A\\u6548\\u679C\\u3002\"), mdx(\"h2\", null, \"\\u4E8C\\u3001\\u8D44\\u6E90\\u83B7\\u53D6\"), mdx(\"p\", null, \"\\u7F51\\u4E0A\\u76F4\\u63A5\\u627E\\u8D44\\u6E90\\uFF0C\\u4E0D\\u8FC7\\u5148\\u4ECE\\u5B98\\u65B9\\u5B89\\u88C5\\u5305\\u62C6\\u5F00\\u770B\\u770B\\uFF0C\\u4F20\\u8BF4\\u6839\\u636E NASA \\u6570\\u636E\\u751F\\u6210\\u7684\\u706B\\u661F\\u6570\\u636E\\u6709\\u6CA1\\u6709\\u5728\\u91CC\\u9762\\u3002\"), mdx(\"p\", null, \"\\u4E0B\\u8F7D apk \\u5305\\uFF0C\\u7136\\u540E apktool \\u53CD\\u7F16\\u8BD1\\uFF0C\\u62FF\\u5230\\u57FA\\u672C\\u7684\\u76EE\\u5F55\\uFF0C\\u5927\\u6982\\u7FFB\\u7FFB\\u5404\\u4E2A\\u6587\\u4EF6\\u5939\\uFF0C\\u4E3B\\u8981\\u76EE\\u7684\\u662F\\u770B\\u770B\\u8FD9\\u4E2A\\u706B\\u661F\\u6570\\u636E\\u5728\\u54EA\\uFF1F\\u5728 \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"Mars_Bright\\\\assets\\\\bin\\\\Data\"), \" \\u76EE\\u5F55\\u4E0B\\u627E\\u5230\\u4E86\\u70B9\\u4E1C\\u897F\\uFF1A\"), mdx(\"p\", null, mdx(\"figure\", {\n parentName: \"p\",\n \"className\": \"gatsby-resp-image-figure\",\n \"style\": {}\n }, \"\\n \", mdx(\"span\", {\n parentName: \"figure\",\n \"className\": \"gatsby-resp-image-wrapper\",\n \"style\": {\n \"position\": \"relative\",\n \"display\": \"block\",\n \"marginLeft\": \"auto\",\n \"marginRight\": \"auto\",\n \"maxWidth\": \"598px\"\n }\n }, \"\\n \", mdx(\"a\", {\n parentName: \"span\",\n \"className\": \"gatsby-resp-image-link\",\n \"href\": \"/static/d39f0fe1de0296dd442ef65942633abb/77884/mars-files.png\",\n \"style\": {\n \"display\": \"block\"\n },\n \"target\": \"_blank\",\n \"rel\": [\"noopener\"]\n }, \"\\n \", mdx(\"span\", {\n parentName: \"a\",\n \"className\": \"gatsby-resp-image-background-image\",\n \"style\": {\n \"paddingBottom\": \"58.301158301158296%\",\n \"position\": \"relative\",\n \"bottom\": \"0\",\n \"left\": \"0\",\n \"backgroundImage\": \"url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAMCAYAAABiDJ37AAAACXBIWXMAAA7EAAAOxAGVKw4bAAABpUlEQVQoz3VSaW/CUAzr//89E4gB04ByrVDO7cO0AQUKlPsqN3g4Ix1CWqSozXu2E6c1zNcIEvEQki9hZM0Y0olnZFMxZJJRSdtKSVaK6WtmULJMlAvpW52+vpvBO9OwC1m814qolS3UKlbwrF+zWnpDPBpCNPKEip1HvVq41mFYeRMfN04uk0DZzgmWGOP76xOz2RyXywWn0wnn8zl48qzX66HVamEwGGCz2UjNZBB3n+QY3sCF72/wX7iui06nI4Ikse52u3LHho9hOE4LnudJV4KVMJ/PBaDnw+EQu90Oo9EouFPB9XqNyWTyK8juOgFTBReLhQD6/b5YpqDv+9J8tVoFNhnH41HORZAiFGBn7ogkBapl3SHvKMyakx8OB8Hs9/s/QU43nU6xXC5ldOajYLPZDD4KiWpfLfOcOBF0e/1AkLtRqwrmJI7jiAiJdEJx1uQwKM5aBNvtNpi6fO6HAA39bTjZdrsVYqPRCARomw24axEkgQU7a3ftrB/lfkJ+Ta6JWHUyHo+FJ4LszIKHJNE+f1AN3tHBvWWuRvdMrA7C+AGLiYJ+R7rU3QAAAABJRU5ErkJggg==')\",\n \"backgroundSize\": \"cover\",\n \"display\": \"block\"\n }\n }), \"\\n \", mdx(\"img\", {\n parentName: \"a\",\n \"className\": \"gatsby-resp-image-image\",\n \"alt\": \"资源文件\",\n \"title\": \"资源文件\",\n \"src\": \"/static/d39f0fe1de0296dd442ef65942633abb/77884/mars-files.png\",\n \"srcSet\": [\"/static/d39f0fe1de0296dd442ef65942633abb/2c191/mars-files.png 259w\", \"/static/d39f0fe1de0296dd442ef65942633abb/86b01/mars-files.png 518w\", \"/static/d39f0fe1de0296dd442ef65942633abb/77884/mars-files.png 598w\"],\n \"sizes\": \"(max-width: 598px) 100vw, 598px\",\n \"style\": {\n \"width\": \"100%\",\n \"height\": \"100%\",\n \"margin\": \"0\",\n \"verticalAlign\": \"middle\",\n \"position\": \"absolute\",\n \"top\": \"0\",\n \"left\": \"0\"\n },\n \"loading\": \"lazy\"\n }), \"\\n \"), \"\\n \"), \"\\n \", mdx(\"figcaption\", {\n parentName: \"figure\",\n \"className\": \"gatsby-resp-image-figcaption\"\n }, \"\\u8D44\\u6E90\\u6587\\u4EF6\"), \"\\n \")), mdx(\"p\", null, \"\\u770B\\u5230\\u6709 unity \\u5173\\u952E\\u5B57\\uFF0C\\u6240\\u4EE5\\u5E94\\u8BE5\\u662F unity \\u6280\\u672F\\u5B9E\\u73B0\\uFF0C\\u7B80\\u5355\\u641C\\u7D22\\u4E0B\\u77E5\\u9053\\u8FD9\\u4E2A\\u6587\\u4EF6\\u5939\\u5C31\\u662F\\u8D44\\u6E90\\u6587\\u4EF6\\uFF0C\", mdx(\"a\", {\n parentName: \"p\",\n \"href\": \"https://github.com/Perfare/AssetStudio\"\n }, \"AssetStudio\"), \" \\u80FD\\u591F\\u67E5\\u770B\\u8FD9\\u4E9B\\u8D44\\u6E90\\u6587\\u4EF6\\uFF0C\\u5728 Windows \\u7535\\u8111\\u4E0A\\u4E0B\\u8F7D\\u8FD0\\u884C\\uFF0C\\u7136\\u540E\\u52A0\\u8F7D\\u6587\\u4EF6\\u5939\\uFF0C\\u770B\\u5230\\u5168\\u90E8\\u7684\\u8D44\\u6E90\\u5217\\u8868\\u3002\"), mdx(\"p\", null, mdx(\"figure\", {\n parentName: \"p\",\n \"className\": \"gatsby-resp-image-figure\",\n \"style\": {}\n }, \"\\n \", mdx(\"span\", {\n parentName: \"figure\",\n \"className\": \"gatsby-resp-image-wrapper\",\n \"style\": {\n \"position\": \"relative\",\n \"display\": \"block\",\n \"marginLeft\": \"auto\",\n \"marginRight\": \"auto\",\n \"maxWidth\": \"1035px\"\n }\n }, \"\\n \", mdx(\"a\", {\n parentName: \"span\",\n \"className\": \"gatsby-resp-image-link\",\n \"href\": \"/static/ed1f059dc6992a393b3db062516da62c/43969/mars-assets.png\",\n \"style\": {\n \"display\": \"block\"\n },\n \"target\": \"_blank\",\n \"rel\": [\"noopener\"]\n }, \"\\n \", mdx(\"span\", {\n parentName: \"a\",\n \"className\": \"gatsby-resp-image-background-image\",\n \"style\": {\n \"paddingBottom\": \"47.490347490347496%\",\n \"position\": \"relative\",\n \"bottom\": \"0\",\n \"left\": \"0\",\n \"backgroundImage\": \"url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAJCAYAAAAywQxIAAAACXBIWXMAAA7DAAAOwwHHb6hkAAACh0lEQVQozyWPeywUABzH72+phTyzELNqnnnNIqahSVr9gaV/WlutldY/NpstTuK8Oe44DnnMo3kTNkYkj12dVx5hju44z9Vh+vPTOb/ts+/3r89+X4FcXk9R2SdklS3IqlqR13RQWddFQ0s/jW2DyOt7qWrso6Z5gIbOYZq6R2npHaO9f4Luoe/0fZ1mYGKeYcUCw6NjCBSTI6wsTrEwp2Bp/gfzswqWF5Ro1n8xMtRHdUUZNVVyZJJCivJzKBXnUSotprREikyfMokYqTifooI8iovECNo6+2n7PE5Hzzd9jtLaNUJ7zxjaPR2DrQ1IYkOpfXqPykf+pAW78DbAHdnjMBqf3ac4JoyUqGDehfvy4a4P6ZH+CJRKJb/Vm2g2t1hTbbC8vMre7j6n96W+HImnMSW3LSkPtqDAx4woGyPiHY3IcTUmwcmI11eNyL55kTwvExKdzyGYnZni4GCf/b1dNjfVrK2tcnJ8aBCONcmpDjCj48k1BuLdqQq7gizQhgRXC0R+1iR6WRHtaEqujyU5vpYU6BHMTE+xva1lW6tFo9GwsbHO0aHOIBxprEDodoHCB040v3AjNegykfamhNqa8MrlEs/dzPHV9wg7E+KcTUnysEAwPa1kZ2fHID0VrqtUHOnOhOPNFSR7nueNqxm5t8xJ009+ecMEobcZIj1l4bbUPbRHGmJD8R0bcgKtzibrdH842N/Tf7mFRr3Bv5Njg3CyvQZxkDXScEeqYzyojfOnLtaPj9HeSCKuIwl1oDDEnrwQOyRhDpRFOCIYH59Eta5mdVXF4tIKcz8XUWu0/NUd093ZgTApkcw0IVmidESiDAPZmSKyMtIQvU8hIzWZdOEZp/0/fL7nel9Ktf0AAAAASUVORK5CYII=')\",\n \"backgroundSize\": \"cover\",\n \"display\": \"block\"\n }\n }), \"\\n \", mdx(\"img\", {\n parentName: \"a\",\n \"className\": \"gatsby-resp-image-image\",\n \"alt\": \"安装包资源解析\",\n \"title\": \"安装包资源解析\",\n \"src\": \"/static/ed1f059dc6992a393b3db062516da62c/0dc48/mars-assets.png\",\n \"srcSet\": [\"/static/ed1f059dc6992a393b3db062516da62c/2c191/mars-assets.png 259w\", \"/static/ed1f059dc6992a393b3db062516da62c/86b01/mars-assets.png 518w\", \"/static/ed1f059dc6992a393b3db062516da62c/0dc48/mars-assets.png 1035w\", \"/static/ed1f059dc6992a393b3db062516da62c/43969/mars-assets.png 1049w\"],\n \"sizes\": \"(max-width: 1035px) 100vw, 1035px\",\n \"style\": {\n \"width\": \"100%\",\n \"height\": \"100%\",\n \"margin\": \"0\",\n \"verticalAlign\": \"middle\",\n \"position\": \"absolute\",\n \"top\": \"0\",\n \"left\": \"0\"\n },\n \"loading\": \"lazy\"\n }), \"\\n \"), \"\\n \"), \"\\n \", mdx(\"figcaption\", {\n parentName: \"figure\",\n \"className\": \"gatsby-resp-image-figcaption\"\n }, \"\\u5B89\\u88C5\\u5305\\u8D44\\u6E90\\u89E3\\u6790\"), \"\\n \")), mdx(\"p\", null, \"\\u6309\\u7167\\u5927\\u5C0F\\u6392\\u5E8F\\u540E\\u53D1\\u73B0\\u4E86 Mars8k \\u8FD9\\u4E2A\\u6587\\u4EF6\\uFF0C\\u6574\\u6574 50MB \\u7684\\u4E00\\u5F20 8k \\xD7 4k \\u7684\\u56FE\\u7247\\uFF0C\\u653E\\u5927\\u4E4B\\u540E\\u6E05\\u6670\\u5EA6\\u4E5F\\u5F88 ok\\u3002\\u9664\\u6B64\\u4E4B\\u5916\\u8FD8\\u80FD\\u770B\\u5230\\u5176\\u4ED6\\u7684\\u8D44\\u6E90\\u8D34\\u56FE\\u3002\"), mdx(\"p\", null, mdx(\"figure\", {\n parentName: \"p\",\n \"className\": \"gatsby-resp-image-figure\",\n \"style\": {}\n }, \"\\n \", mdx(\"span\", {\n parentName: \"figure\",\n \"className\": \"gatsby-resp-image-wrapper\",\n \"style\": {\n \"position\": \"relative\",\n \"display\": \"block\",\n \"marginLeft\": \"auto\",\n \"marginRight\": \"auto\",\n \"maxWidth\": \"752px\"\n }\n }, \"\\n \", mdx(\"a\", {\n parentName: \"span\",\n \"className\": \"gatsby-resp-image-link\",\n \"href\": \"/static/8614c24ba4507bb1331cec75fa2a22ac/21904/mars-files2.jpg\",\n \"style\": {\n \"display\": \"block\"\n },\n \"target\": \"_blank\",\n \"rel\": [\"noopener\"]\n }, \"\\n \", mdx(\"span\", {\n parentName: \"a\",\n \"className\": \"gatsby-resp-image-background-image\",\n \"style\": {\n \"paddingBottom\": \"26.25482625482626%\",\n \"position\": \"relative\",\n \"bottom\": \"0\",\n \"left\": \"0\",\n \"backgroundImage\": \"url('data:image/jpeg;base64,/9j/2wBDABALDA4MChAODQ4SERATGCgaGBYWGDEjJR0oOjM9PDkzODdASFxOQERXRTc4UG1RV19iZ2hnPk1xeXBkeFxlZ2P/2wBDARESEhgVGC8aGi9jQjhCY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2P/wgARCAAFABQDASIAAhEBAxEB/8QAFwABAAMAAAAAAAAAAAAAAAAAAAMEBf/EABQBAQAAAAAAAAAAAAAAAAAAAAD/2gAMAwEAAhADEAAAAdKMLwP/xAAYEAADAQEAAAAAAAAAAAAAAAABAhEAA//aAAgBAQABBQLuCVRHs3//xAAUEQEAAAAAAAAAAAAAAAAAAAAQ/9oACAEDAQE/AT//xAAUEQEAAAAAAAAAAAAAAAAAAAAQ/9oACAECAQE/AT//xAAcEAABAwUAAAAAAAAAAAAAAAABAAISECEjQlH/2gAIAQEABj8CETG6dk25T//EABkQAAIDAQAAAAAAAAAAAAAAAAABESFRMf/aAAgBAQABPyG0erQulhbmMLCGI//aAAwDAQACAAMAAAAQg8//xAAUEQEAAAAAAAAAAAAAAAAAAAAQ/9oACAEDAQE/ED//xAAUEQEAAAAAAAAAAAAAAAAAAAAQ/9oACAECAQE/ED//xAAbEAEAAgIDAAAAAAAAAAAAAAABABEhMUFRkf/aAAgBAQABPxAQcG2pWoixllg5W8+HHkLUCB6n/9k=')\",\n \"backgroundSize\": \"cover\",\n \"display\": \"block\"\n }\n }), \"\\n \", mdx(\"img\", {\n parentName: \"a\",\n \"className\": \"gatsby-resp-image-image\",\n \"alt\": \"导出的其他资源\",\n \"title\": \"导出的其他资源\",\n \"src\": \"/static/8614c24ba4507bb1331cec75fa2a22ac/21904/mars-files2.jpg\",\n \"srcSet\": [\"/static/8614c24ba4507bb1331cec75fa2a22ac/fca29/mars-files2.jpg 259w\", \"/static/8614c24ba4507bb1331cec75fa2a22ac/f4507/mars-files2.jpg 518w\", \"/static/8614c24ba4507bb1331cec75fa2a22ac/21904/mars-files2.jpg 752w\"],\n \"sizes\": \"(max-width: 752px) 100vw, 752px\",\n \"style\": {\n \"width\": \"100%\",\n \"height\": \"100%\",\n \"margin\": \"0\",\n \"verticalAlign\": \"middle\",\n \"position\": \"absolute\",\n \"top\": \"0\",\n \"left\": \"0\"\n },\n \"loading\": \"lazy\"\n }), \"\\n \"), \"\\n \"), \"\\n \", mdx(\"figcaption\", {\n parentName: \"figure\",\n \"className\": \"gatsby-resp-image-figcaption\"\n }, \"\\u5BFC\\u51FA\\u7684\\u5176\\u4ED6\\u8D44\\u6E90\"), \"\\n \")), mdx(\"p\", null, \"\\u5BFC\\u51FA\\u5168\\u90E8\\u8D44\\u6E90\\uFF0C\\u80FD\\u627E\\u5230\\u5730\\u6807\\u7684 obj \\u548C fbx \\u5F62\\u72B6\\u6587\\u4EF6\\u3001\\u8D34\\u56FE\\u6587\\u4EF6\\u7B49\\uFF0C\\u8FD9\\u6837\\u5C31\\u597D\\u529E\\u591A\\u4E86\\u3002\\u4E0D\\u8FC7\\u597D\\u50CF\\u6587\\u4EF6\\u90FD\\u592A\\u5927\\u4E86\\uFF0C\\u52A8\\u8F84\\u51E0\\u5341\\u5146\\uFF0C\\u8FD9\\u4E2A\\u540E\\u9762\\u4F18\\u5316\\u3002\"), mdx(\"h3\", null, \"\\u7D20\\u6750\\u5217\\u8868\"), mdx(\"ol\", null, mdx(\"li\", {\n parentName: \"ol\"\n }, mdx(\"strong\", {\n parentName: \"li\"\n }, \" Mars8k.png \"), \" \\u661F\\u7403\\u8D34\\u56FE\"), mdx(\"li\", {\n parentName: \"ol\"\n }, mdx(\"strong\", {\n parentName: \"li\"\n }, \" mars1/mars1.fbx \"), \" \\u5730\\u9762\\u4E00\\u4E2A\\u70B9\\u7684\\u5730\\u5F62\"), mdx(\"li\", {\n parentName: \"ol\"\n }, mdx(\"strong\", {\n parentName: \"li\"\n }, \" mars1/landscape6.png \"), \" \\u5730\\u5F62\\u7684\\u8D34\\u56FE\"), mdx(\"li\", {\n parentName: \"ol\"\n }, mdx(\"strong\", {\n parentName: \"li\"\n }, \" mars1/landscape6_n.png \"), \" \\u591C\\u95F4\\u5730\\u5F62\\u8D34\\u56FE\"), mdx(\"li\", {\n parentName: \"ol\"\n }, mdx(\"strong\", {\n parentName: \"li\"\n }, \" mars1/landsmid11.png \"), \" \\u653E\\u5927\\u8F6C\\u573A\\u7684\\u6548\\u679C\\u56FE\")), mdx(\"p\", null, \"\\u661F\\u7403\\u8D34\\u56FE\\u80FD\\u591F\\u76F4\\u63A5\\u8D34\\u5728\\u7403\\u4E0A\\uFF0C\\u7136\\u540E fbx \\u683C\\u5F0F\\u7684\\u6A21\\u578B\\u53EF\\u4EE5\\u88AB three.js \\u76F4\\u63A5\\u52A0\\u8F7D\\uFF0C\\u52A0\\u4E0A\\u8D34\\u56FE\\u5C31\\u884C\\uFF0C\\u5F00\\u641E\\u3002\"), mdx(\"h2\", null, \"\\u4E09\\u3001\\u642D\\u5EFA\\u4FEF\\u77B0\\u548C\\u4FA7\\u9762\\u89C6\\u89D2\"), mdx(\"p\", null, \"\\u8FD9\\u4E00\\u6B65\\u53EA\\u9700\\u8981 Mars8k.png \\u8FD9\\u4E2A\\u6587\\u4EF6\"), mdx(\"p\", null, \"\\u7528 react \\u505A\\u7B80\\u5355\\u7684 UI\\uFF0C\\u7136\\u540E\\u642D\\u5EFA\\u4E00\\u4E2A\\u57FA\\u672C\\u7684\\u4EE3\\u7801\\u6846\\u67B6\\uFF0C\\u4EE5\\u4E0B\\u4EE3\\u7801\\u4EC5\\u5C55\\u793A\\u903B\\u8F91\\uFF0C\\u6587\\u7AE0\\u6700\\u540E\\u6709\\u6E90\\u7801\\u5730\\u5740\\uFF1A\"), mdx(\"blockquote\", null, mdx(\"p\", {\n parentName: \"blockquote\"\n }, \"\\u4EE5\\u4E0B\\u90E8\\u5206\\u90FD\\u53EF\\u4EE5\\u5728 three.js \\u7F51\\u7AD9\\u7684 \", mdx(\"a\", {\n parentName: \"p\",\n \"href\": \"https://threejs.org/editor/\"\n }, \"\\u5728\\u7EBF\\u7F16\\u8F91\\u5668\"), \" \\u4E0A\\u53EF\\u89C6\\u5316\\u642D\\u5EFA\\u3002\")), mdx(\"pre\", null, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-ts\"\n }, \"import {\\n Group,\\n Mesh,\\n MeshLambertMaterial,\\n PerspectiveCamera,\\n PointLight,\\n Scene,\\n SphereGeometry,\\n WebGLRenderer,\\n Vector3,\\n} from \\\"three\\\";\\n\\n// \\u521D\\u59CB\\u5316\\u6E32\\u67D3\\u5668\\nconst renderer = new WebGLRenderer({\\n alpha: true,\\n antialias: true,\\n canvas: canvasElement,\\n});\\n\\n// \\u6DFB\\u52A0\\u5404\\u4E2A\\u90E8\\u4EF6\\nconst camera = new PerspectiveCamera(); // \\u76F8\\u673A\\nconst sunOrbit = new Group(); // \\u592A\\u9633\\u8F68\\u9053\\nconst globe = new Group(); // \\u5730\\u7403\\nconst globeSphere = new Mesh(); // \\u7403\\u4F53\\nconst scene = new Scene(); // \\u573A\\u666F\\n\\n// \\u52A0\\u4E2A\\u73AF\\u5883\\u5149\\u7528\\u6765\\u6D4B\\u8BD5\\nscene.add(new AmbientLight(\\\"white\\\", 5));\\n\\n// \\u5408\\u4F53\\nscene.add(sunOrbit);\\nglobe.add(globeSphere);\\nscene.add(camera);\\nscene.add(globe);\\n\\n// \\u6E32\\u67D3\\u90E8\\u5206\\nconst render = (): void => {\\n renderer.render(scene, camera);\\n\\n // TODO: \\u661F\\u7403\\u548C\\u592A\\u9633\\u7684\\u8FD0\\u884C\\n // TODO: \\u76F8\\u673A\\u7684\\u8F6C\\u573A\\u66F4\\u65B0\\n}\\n\\n// \\u5FAA\\u73AF\\u5668\\nconst animate = (): void => {\\n render();\\n requestAnimationFrame(animate);\\n}\\n\\n// \\u76D1\\u542C\\u6267\\u884C resize \\u66F4\\u65B0\\u89C6\\u89D2\\u5927\\u5C0F\\uFF0C\\u8FD9\\u91CC\\u7565\\nconst viewPortChangeHandler = (): void => {\\n renderer.setSize(window.innerWidth, window.innerHeight);\\n camera.aspect = window.innerWidth / window.innerHeight;\\n camera.updateProjectionMatrix();\\n}\\nwindow.addEventListener('resize', viewPortChangeHandler)\\nviewPortChangeHandler()\\n\")), mdx(\"p\", null, \"\\u4EE5\\u4E0A\\u903B\\u8F91\\u5F88\\u7B80\\u5355\\u3002\"), mdx(\"h3\", null, \"1. \\u76F8\\u673A\"), mdx(\"pre\", null, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-ts\"\n }, \"// \\u6D4B\\u8BD5\\u7528\\ncamera.position.set(300 * 4, 0, 0);\\ncamera.lookAt(0, 0, 0);\\n\\ncamera.fov = 45; // \\u89C6\\u89D2\\u5E7F\\u5EA6\\ncamera.far = 300 * 10; // \\u89C6\\u89D2\\u8FDC\\u70B9\\ncamera.near = 0.01; // \\u89C6\\u89D2\\u8FD1\\u70B9\\n\")), mdx(\"p\", null, mdx(\"figure\", {\n parentName: \"p\",\n \"className\": \"gatsby-resp-image-figure\",\n \"style\": {}\n }, \"\\n \", mdx(\"span\", {\n parentName: \"figure\",\n \"className\": \"gatsby-resp-image-wrapper\",\n \"style\": {\n \"position\": \"relative\",\n \"display\": \"block\",\n \"marginLeft\": \"auto\",\n \"marginRight\": \"auto\",\n \"maxWidth\": \"1035px\"\n }\n }, \"\\n \", mdx(\"a\", {\n parentName: \"span\",\n \"className\": \"gatsby-resp-image-link\",\n \"href\": \"/static/e2042b95152f087fcc94e0d7dbba7f56/3a38f/step-1.png\",\n \"style\": {\n \"display\": \"block\"\n },\n \"target\": \"_blank\",\n \"rel\": [\"noopener\"]\n }, \"\\n \", mdx(\"span\", {\n parentName: \"a\",\n \"className\": \"gatsby-resp-image-background-image\",\n \"style\": {\n \"paddingBottom\": \"51.73745173745174%\",\n \"position\": \"relative\",\n \"bottom\": \"0\",\n \"left\": \"0\",\n \"backgroundImage\": \"url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAKCAYAAAC0VX7mAAAACXBIWXMAAAsSAAALEgHS3X78AAAA+0lEQVQoz5WSR27FMAxEfSV/995tGHC5/2kYPAGjCAmyyGLMYRuTkqLP52NCHMceSZJYmqZWFIU1TWPTNFnbtr6OvEBMPFJjnudW17V1Xeeat22z8zztui6779ve97XneWzfd1cn4VAM7gSXZbHjOBwQEQcIhJY8oKeqKgs3dBNCWIWJ5nl2oFhWfF1X78OpB2xTluX3hHxYdxxHl8SKD8PgfcVUI66fUYtOpFE5O4J933suXyCOVQ5hfM6Uy+MuIo1KQE2AY5AVVx4fkSzL/KqCFySpZp4JCEXxuQTW+ikSPqEofEc0hKJMIRHW+Uvkl6BE9Ra5tf+IhPgCIwlPjKaFa4MAAAAASUVORK5CYII=')\",\n \"backgroundSize\": \"cover\",\n \"display\": \"block\"\n }\n }), \"\\n \", mdx(\"img\", {\n parentName: \"a\",\n \"className\": \"gatsby-resp-image-image\",\n \"alt\": \"视角（添加辅助网格，且参数不同）\",\n \"title\": \"视角（添加辅助网格，且参数不同）\",\n \"src\": \"/static/e2042b95152f087fcc94e0d7dbba7f56/0dc48/step-1.png\",\n \"srcSet\": [\"/static/e2042b95152f087fcc94e0d7dbba7f56/2c191/step-1.png 259w\", \"/static/e2042b95152f087fcc94e0d7dbba7f56/86b01/step-1.png 518w\", \"/static/e2042b95152f087fcc94e0d7dbba7f56/0dc48/step-1.png 1035w\", \"/static/e2042b95152f087fcc94e0d7dbba7f56/3a38f/step-1.png 1131w\"],\n \"sizes\": \"(max-width: 1035px) 100vw, 1035px\",\n \"style\": {\n \"width\": \"100%\",\n \"height\": \"100%\",\n \"margin\": \"0\",\n \"verticalAlign\": \"middle\",\n \"position\": \"absolute\",\n \"top\": \"0\",\n \"left\": \"0\"\n },\n \"loading\": \"lazy\"\n }), \"\\n \"), \"\\n \"), \"\\n \", mdx(\"figcaption\", {\n parentName: \"figure\",\n \"className\": \"gatsby-resp-image-figcaption\"\n }, \"\\u89C6\\u89D2\\uFF08\\u6DFB\\u52A0\\u8F85\\u52A9\\u7F51\\u683C\\uFF0C\\u4E14\\u53C2\\u6570\\u4E0D\\u540C\\uFF09\"), \"\\n \")), mdx(\"h3\", null, \"2. \\u7403\\u3001\\u8D34\\u56FE\\u548C\\u81EA\\u8F6C\"), mdx(\"pre\", null, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-ts\"\n }, \"// \\u8BBE\\u7F6E\\u5F62\\u72B6\\u548C\\u9876\\u70B9\\u6570\\nglobeSphere.geometry = new SphereGeometry(300, 100, 100);\\n// \\u6DFB\\u52A0\\u6750\\u8D28\\u548C\\u8D34\\u56FE\\nglobeSphere.material = new MeshLambertMaterial({\\n map: new TextureLoader(manager).load('textures/Mars8K_web_low.jpg')\\n});\\n\")), mdx(\"p\", null, mdx(\"figure\", {\n parentName: \"p\",\n \"className\": \"gatsby-resp-image-figure\",\n \"style\": {}\n }, \"\\n \", mdx(\"span\", {\n parentName: \"figure\",\n \"className\": \"gatsby-resp-image-wrapper\",\n \"style\": {\n \"position\": \"relative\",\n \"display\": \"block\",\n \"marginLeft\": \"auto\",\n \"marginRight\": \"auto\",\n \"maxWidth\": \"1035px\"\n }\n }, \"\\n \", mdx(\"a\", {\n parentName: \"span\",\n \"className\": \"gatsby-resp-image-link\",\n \"href\": \"/static/2d864b7dab016fb0261ae79b98d9559b/06337/step-2.png\",\n \"style\": {\n \"display\": \"block\"\n },\n \"target\": \"_blank\",\n \"rel\": [\"noopener\"]\n }, \"\\n \", mdx(\"span\", {\n parentName: \"a\",\n \"className\": \"gatsby-resp-image-background-image\",\n \"style\": {\n \"paddingBottom\": \"45.55984555984556%\",\n \"position\": \"relative\",\n \"bottom\": \"0\",\n \"left\": \"0\",\n \"backgroundImage\": \"url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAJCAYAAAAywQxIAAAACXBIWXMAAAsSAAALEgHS3X78AAABmUlEQVQoz21QOy8EURidnyFEgnhEWDu7e+fOnXvnznPHGlkhZBsF4lFrJBQSBb1SodKgVJMgoVAq9H7KMd/dh/Uoznzf3HvOuef7rFqtBkK1WkW3J7BOLdUYZhmH7TA4rNrh/q8hWP0XVCuVigF3bTDHxpacxsl8GS02BcctQ4gKGLN/mPX3Vr8Z5xxKSSipEMYKZ/EE7rIh3C4P4ToZwAYbQ5rNI0m00dDDv417CRljyLIM+cIC0kaO7abG49II7tcn8Xpg46E1jqtwEJt5jEZzEVm9DinlH+OeodYaaZoiiSPIMMHOosDzyihe9mbwdhjiaauEu3wY67GHII1RTxPDj6KoWIP4Tkgf13URBIExJfg6QD2WuFybxcepj8+LHO9HLs5X58xKokj3uKQLwxC+75uVWTSqUsocEDzPM1VpiUw72M/KuNnlOG7MIRIcQaSgfWnGJR6Zkr5rbpEBXVL97oksiqQeHCEhignc4lxSulAUBl4xpmdGpekIlI7CWV0jAhEI7X8SckiPF30bnLNiV8wIuzv7jS9HJjZ7CZ3mVAAAAABJRU5ErkJggg==')\",\n \"backgroundSize\": \"cover\",\n \"display\": \"block\"\n }\n }), \"\\n \", mdx(\"img\", {\n parentName: \"a\",\n \"className\": \"gatsby-resp-image-image\",\n \"alt\": \"球和贴图(绿色是 Y 轴)\",\n \"title\": \"球和贴图(绿色是 Y 轴)\",\n \"src\": \"/static/2d864b7dab016fb0261ae79b98d9559b/0dc48/step-2.png\",\n \"srcSet\": [\"/static/2d864b7dab016fb0261ae79b98d9559b/2c191/step-2.png 259w\", \"/static/2d864b7dab016fb0261ae79b98d9559b/86b01/step-2.png 518w\", \"/static/2d864b7dab016fb0261ae79b98d9559b/0dc48/step-2.png 1035w\", \"/static/2d864b7dab016fb0261ae79b98d9559b/06337/step-2.png 1472w\"],\n \"sizes\": \"(max-width: 1035px) 100vw, 1035px\",\n \"style\": {\n \"width\": \"100%\",\n \"height\": \"100%\",\n \"margin\": \"0\",\n \"verticalAlign\": \"middle\",\n \"position\": \"absolute\",\n \"top\": \"0\",\n \"left\": \"0\"\n },\n \"loading\": \"lazy\"\n }), \"\\n \"), \"\\n \"), \"\\n \", mdx(\"figcaption\", {\n parentName: \"figure\",\n \"className\": \"gatsby-resp-image-figcaption\"\n }, \"\\u7403\\u548C\\u8D34\\u56FE(\\u7EFF\\u8272\\u662F Y \\u8F74)\"), \"\\n \")), mdx(\"p\", null, \"\\u81EA\\u8F6C\\u90E8\\u5206\\u5728 render \\u51FD\\u6570\\u4E2D\\u8C03\\u7528\\uFF1A\"), mdx(\"pre\", null, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-ts\"\n }, \"// \\u6BCF\\u6B21\\u6E32\\u67D3\\u7684\\u65F6\\u5019\\u7ED5 y \\u8F74\\u65CB\\u8F6C 1/24\\xB0\\nglobeSphere.rotateY(Math.PI / 180 / 24);\\n\")), mdx(\"h3\", null, \"3. \\u592A\\u9633\\u548C\\u8F68\\u9053\"), mdx(\"p\", null, \"\\u592A\\u9633\\u662F\\u4E2A\\u70B9\\u5149\\u6E90\\uFF0C\\u8F68\\u9053\\u53EF\\u4EE5\\u4F7F\\u7528\\u4E00\\u4E2A Group\\uFF0C\\u8BA9\\u592A\\u9633\\u4F5C\\u4E3A\\u5B50\\u7EC4\\u4EF6\\uFF0C\\u7136\\u540E\\u8F68\\u9053\\u7ED5 x \\u8F74\\u65CB\\u8F6C\\u5373\\u53EF\\uFF0C\\u4E0D\\u9700\\u8981\\u592A\\u590D\\u6742\\u7684\\u8F68\\u9053\\u63A7\\u5236\"), mdx(\"pre\", null, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-ts\"\n }, \"// \\u5728\\u592A\\u9633\\u7684\\u8F68\\u9053\\u4E0A\\u6DFB\\u52A0\\u5149\\u6E90\\uFF0C\\u8FD9\\u6837\\u53EA\\u9700\\u8981\\u8F68\\u9053\\u65CB\\u8F6C\\u5373\\u53EF\\nconst sunLight = new PointLight(\\\"white\\\"); // \\u592A\\u9633\\nsunOrbit.add(sunLight)\\n\\n// \\u8FD9\\u6837\\u8F68\\u9053\\u5728 x \\u6B63\\u4E0A\\u65B9\\uFF0C\\u5149\\u6E90\\u4E0D\\u4F1A\\u88AB\\u906E\\u6321\\uFF0C\\u65CB\\u8F6C\\u53EF\\u4EE5\\u76F4\\u63A5\\u7ED5 x \\u8F74\\nsunOrbit.position.setX(300 * 2);\\n\\n// \\u8BBE\\u7F6E\\u592A\\u9633\\u7684\\u76F8\\u5BF9\\u4F4D\\u7F6E\\nsunLight.position.set(0, 300 * 3, 300 * 3);\\n// \\u8BBE\\u7F6E\\u5F3A\\u5EA6\\nsunLight.intensity = 3;\\n\")), mdx(\"p\", null, mdx(\"figure\", {\n parentName: \"p\",\n \"className\": \"gatsby-resp-image-figure\",\n \"style\": {}\n }, \"\\n \", mdx(\"span\", {\n parentName: \"figure\",\n \"className\": \"gatsby-resp-image-wrapper\",\n \"style\": {\n \"position\": \"relative\",\n \"display\": \"block\",\n \"marginLeft\": \"auto\",\n \"marginRight\": \"auto\",\n \"maxWidth\": \"852px\"\n }\n }, \"\\n \", mdx(\"a\", {\n parentName: \"span\",\n \"className\": \"gatsby-resp-image-link\",\n \"href\": \"/static/fe90e1985e7dff0963f5afc18e6b44b9/d84ba/step-4.png\",\n \"style\": {\n \"display\": \"block\"\n },\n \"target\": \"_blank\",\n \"rel\": [\"noopener\"]\n }, \"\\n \", mdx(\"span\", {\n parentName: \"a\",\n \"className\": \"gatsby-resp-image-background-image\",\n \"style\": {\n \"paddingBottom\": \"54.05405405405405%\",\n \"position\": \"relative\",\n \"bottom\": \"0\",\n \"left\": \"0\",\n \"backgroundImage\": \"url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAALCAYAAAB/Ca1DAAAACXBIWXMAAAsSAAALEgHS3X78AAABz0lEQVQoz5VSTY/TMBDtv+AABz6WhQXaxo6TTdrETdKktRPapt9IXNCKI4gfwIXTInFG4uc+xk42ilAvHJ4y9jhv3ryZgeu6+F9wzjGdThEEgY37ucGlx93Zxi3ae5M3KMsSUkowxi4T9omanxg4xQ5v8G9hwQVch966vCvSEfbJHMeBEAKefwuPqqe+gBQcjN6YHGMEh2HsjzGOx3BZQ9p00lNopBvMZjOczmcUicTHmyf4Hlzj8PY5dOghy3PKS0STCEFK/hXcqmwscW1HA6POEBmDjS8fiGy93SF59Rj36VP8zq7xjT/DV+81TrstDscj9vs99qcDZBZ3HvLWc6swSRKs12vUdY16syElCwQvH+FXeYWf0Qv8Sa7wQ95ALxVWqxWq6j2O5y0+fwoQ3Y6IlDw1XhqFWmtLVlWVRVlqQkXejHCXvcH9RuBLPMJBhlDUgVYKWiuUaod6ohBQqxF5q4dDMEMYRRHiOEaappjP5yiKAmq5REaxSwOQfIjQE3TOsVgsKL+AUtRBuMW7UTvlfssPwzAwftoJex7CMEREhYLJFDOyxBTLsgx5boiXtNhBt5v2y9uWLy32w6Cs4b0dM4V837fFhPC6e97b078nHG/9AU6/ygAAAABJRU5ErkJggg==')\",\n \"backgroundSize\": \"cover\",\n \"display\": \"block\"\n }\n }), \"\\n \", mdx(\"img\", {\n parentName: \"a\",\n \"className\": \"gatsby-resp-image-image\",\n \"alt\": \"太阳和轨道\",\n \"title\": \"太阳和轨道\",\n \"src\": \"/static/fe90e1985e7dff0963f5afc18e6b44b9/d84ba/step-4.png\",\n \"srcSet\": [\"/static/fe90e1985e7dff0963f5afc18e6b44b9/2c191/step-4.png 259w\", \"/static/fe90e1985e7dff0963f5afc18e6b44b9/86b01/step-4.png 518w\", \"/static/fe90e1985e7dff0963f5afc18e6b44b9/d84ba/step-4.png 852w\"],\n \"sizes\": \"(max-width: 852px) 100vw, 852px\",\n \"style\": {\n \"width\": \"100%\",\n \"height\": \"100%\",\n \"margin\": \"0\",\n \"verticalAlign\": \"middle\",\n \"position\": \"absolute\",\n \"top\": \"0\",\n \"left\": \"0\"\n },\n \"loading\": \"lazy\"\n }), \"\\n \"), \"\\n \"), \"\\n \", mdx(\"figcaption\", {\n parentName: \"figure\",\n \"className\": \"gatsby-resp-image-figcaption\"\n }, \"\\u592A\\u9633\\u548C\\u8F68\\u9053\"), \"\\n \")), mdx(\"p\", null, \"\\u8F68\\u9053\\u8FD0\\u884C\\u53EF\\u4EE5\\u5728 render \\u51FD\\u6570\\u4E2D\\u8C03\\u7528\\uFF1A\"), mdx(\"pre\", null, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-ts\"\n }, \"// \\u6BCF\\u6B21\\u6E32\\u67D3\\u7684\\u65F6\\u5019\\u7ED5 x \\u65CB\\u8F6C 1/24\\xB0\\nsunOrbit.rotateX(Math.PI / 180 / 24)\\n\")), mdx(\"h3\", null, \"4. \\u8F6C\\u573A\"), mdx(\"p\", null, \"\\u8F6C\\u573A\\u5C31\\u662F\\u628A\\u76F8\\u673A\\u89C6\\u89D2\\u79FB\\u52A8\\u5230\\u661F\\u7403\\u5DE6\\u4E0A\\u89D2\\uFF0C\\u7136\\u540E\\u5C06\\u592A\\u9633\\u5149\\u79FB\\u52A8\\u5230\\u89C6\\u89D2\\u4E0A\\u65B9\\uFF0C\\u6240\\u4EE5\\u8FC7\\u7A0B\\u5C31\\u662F\\u4E24\\u4E2A\\u7269\\u4F53\\u7684\\u4E24\\u4E2A\\u72B6\\u6001\\u5207\\u6362\\u3002\"), mdx(\"p\", null, \"\\u5176\\u4E2D\\u7528\\u5230 TWEEN\\uFF0C\\u7528\\u6765\\u505A\\u52A8\\u753B\\u8FC7\\u7A0B\\u4E2D\\u503C\\u7684\\u8FC7\\u6E21\\uFF1A\"), mdx(\"pre\", null, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-ts\"\n }, \"import TWEEN from \\\"@tweenjs/tween.js\\\";\\n\\n// \\u4FDD\\u5B58\\u8FC7\\u6E21\\u524D\\u540E\\u7684\\u592A\\u9633\\u89D2\\u5EA6\\nconst lastSunOrbitRotate = 0\\n\\n// \\u592A\\u9633\\u90E8\\u5206 \\u2193\\nlastSunOrbitRotate = sunOrbit.rotation.x;\\nconst sunOrbitTween = new TWEEN.Tween({ x: lastSunOrbitRotate });\\n// \\u66F4\\u65B0\\u8FC7\\u7A0B\\u4E2D\\u628A\\u4E2D\\u95F4\\u503C\\u6DFB\\u52A0\\u5230\\u7269\\u4F53\\u4E0A\\nsunOrbitTween.onUpdate((o: {x: number}) => {\\n sunOrbit.setRotationFromAxisAngle(new Vector3(1, 0, 0), o.x);\\n});\\n// \\u8FC7\\u6E21\\u5230 0 \\u89D2\\u5EA6\\nsunOrbitTween.to({ x: 0 }, 3000).start();\\n\\n// \\u76F8\\u673A\\u90E8\\u5206\\u9700\\u8981\\u8003\\u8651\\u4F4D\\u7F6E\\u53EF\\u770B\\u7684\\u65B9\\u5411 \\u2193\\nconst before = {\\n pos: { x: 300 * 4, y: 0, z: 0 },\\n look: { x: 0, y: 0, z: 0 },\\n}\\nconst after = {\\n pos: { x: 300 * 2.5, y: 300 / 8, z: 300 / 2 },\\n look: { x: 300, y: 300 / 8, z: 300 / 2 },\\n}\\nconst cameraPosAtTween = new TWEEN.Tween({ ...before.pos });\\ncameraPosAtTween.onUpdate((o: XYZ) => camera.position.set(o.x, o.y, o.z))\\ncameraPosAtTween.to({ ...after.pos }, 300).start();\\n\\nconst cameraLookAtTween = new TWEEN.Tween({ ...before.look });\\ncameraLookAtTween.onUpdate((o: XYZ) => camera.lookAt(o.x, o.y, o.z));\\ncameraLookAtTween.to({ ...after.look }, 300).start();\\n\")), mdx(\"p\", null, \"\\u81F3\\u6B64\\uFF0C\\u80FD\\u5B9E\\u73B0\\u706B\\u661F\\u9633\\u5149\\u7684\\u7167\\u5C04\\u6548\\u679C\\uFF0C\\u7136\\u540E\\u6DFB\\u52A0\\u706B\\u661F\\u81EA\\u8F6C\\u3001\\u6DFB\\u52A0\\u592A\\u9633\\u7ED5\\u7740\\u706B\\u661F\\u65CB\\u8F6C\\uFF0C\\u7136\\u540E\\u5C06\\u89C6\\u89D2\\u548C\\u592A\\u9633\\u89D2\\u5EA6\\u5728\\u4E24\\u4E2A\\u72B6\\u6001\\u4E4B\\u95F4\\u5207\\u6362\\uFF0C\\u4E5F\\u5C31\\u80FD\\u5B9E\\u73B0\\u6700\\u57FA\\u672C\\u7684\\u529F\\u80FD\\u4E86\\uFF0C\\u518D\\u52A0\\u4E0A\\u4EBF\\u70B9\\u7EC6\\u8282\\uFF0C\\u80FD\\u591F\\u57FA\\u672C\\u5B9E\\u73B0\\u8D85\\u7EA7\\u58C1\\u7EB8\\u7684\\u6548\\u679C\\u3002\"), mdx(\"h2\", null, \"\\u56DB\\u3001\\u7B2C\\u4E09\\u4E2A\\u573A\\u666F\"), mdx(\"p\", null, \"\\u5B9E\\u73B0\\u4E86\\u661F\\u7403\\u7684\\u6548\\u679C\\uFF0C\\u90A3\\u4E48\\u964D\\u843D\\u5230\\u5177\\u4F53\\u7684\\u5730\\u65B9\\u5462\\uFF1F\"), mdx(\"h3\", null, \"1. \\u573A\\u666F\\u5B9E\\u73B0\"), mdx(\"p\", null, \"\\u8FD9\\u4E24\\u4E2A\\u573A\\u666F\\u9996\\u5148\\u505A\\u5728\\u540C\\u4E00\\u4E2A\\u573A\\u666F\\u4E2D\\u6709\\u70B9\\u56F0\\u96BE\\uFF0C\\u6BD5\\u7ADF\\u8FD9\\u4E2A\\u5730\\u70B9\\u5982\\u679C\\u5B9E\\u9645\\u653E\\u5230\\u661F\\u7403\\u7684\\u67D0\\u4E2A\\u4F4D\\u7F6E\\uFF0C\\u8BA9\\u76F8\\u673A\\u53BB\\u653E\\u5927\\uFF0C\\u5148\\u4E0D\\u8BF4\\u6548\\u679C\\u600E\\u4E48\\u6837\\uFF0C\\u5149\\u7EBF\\u7684\\u90E8\\u5206\\u4E0D\\u592A\\u597D\\u5B89\\u6392\\uFF0C\\u52A0\\u4E0A\\u6574\\u4E2A\\u5C3A\\u5EA6\\u548C\\u5355\\u4F4D\\u90FD\\u4E0D\\u592A\\u597D\\u6574\\uFF0C\\u6240\\u4EE5\\u5E76\\u6CA1\\u6709\\u8FD9\\u4E48\\u505A\\uFF0C\\u4E0D\\u8FC7\\u6280\\u672F\\u4E0A\\u5E94\\u8BE5\\u662F\\u53EF\\u4EE5\\u5B9E\\u73B0\\u7684\\u3002\"), mdx(\"p\", null, \"\\u8FD9\\u4E2A\\u9879\\u76EE\\u7528\\u5230\\u7684\\u65B9\\u6CD5\\u662F\\u628A\\u5730\\u9762\\u7684\\u6A21\\u578B\\u653E\\u5230\\u4E86\\u53E6\\u4E00\\u4E2A\\u573A\\u666F\\u4E2D\\uFF0C\\u7136\\u540E\\u4ECE dom \\u4E0A\\u6765\\u5904\\u7406\\u5207\\u6362\\u8FC7\\u7A0B\\u3002\"), mdx(\"p\", null, \"\\u4E0B\\u9762\\u5148\\u5B9E\\u73B0\\u7B2C\\u4E09\\u4E2A\\u573A\\u666F\\u3002\"), mdx(\"h3\", null, \"2. \\u6A21\\u578B\\u548C\\u8D34\\u56FE\"), mdx(\"p\", null, \"\\u4ECE\\u539F\\u6765\\u7684\\u8D44\\u6E90\\u4E2D\\u5BFC\\u51FA\\u6765\\u7684\\u662F fbx \\u7684\\u683C\\u5F0F\\uFF0CThree.js \\u80FD\\u591F\\u76F4\\u63A5\\u52A0\\u8F7D\\uFF0C\"), mdx(\"pre\", null, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-ts\"\n }, \"import { FBXLoader } from \\\"three/examples/jsm/loaders/FBXLoader\\\";\\n\\n/* \\n fbx \\u91CC\\u9762\\u5305\\u542B\\u8D34\\u56FE\\u7684\\u8D44\\u6E90\\u5F15\\u7528\\uFF0C\\u6240\\u4EE5\\u5FC5\\u987B\\u5C06 \\n textures/landscape6.png\\n textures/landscape6_n.png\\n textures/landsmid11.png\\n textures/Default-ParticleSystem.png\\n \\u8FD9\\u51E0\\u4E2A\\u6587\\u4EF6\\u4E5F\\u653E\\u5728\\u540C\\u4E00\\u7EA7\\u76EE\\u5F55\\uFF0C\\u4E0D\\u7136\\u4F1A\\u62A5 404\\uFF0C\\u5E76\\u4E14\\u6CA1\\u6709\\u8D34\\u56FE\\n*/\\n\\nnew FBXLoader().load('textures/mars1.fbx', (model: Group) => {\\n scene.add(model)\\n})\\n// \\u52A0\\u4E2A\\u73AF\\u5883\\u5149\\u7528\\u6765\\u6D4B\\u8BD5\\nscene.add(new AmbientLight(\\\"white\\\", 5));\\n\")), mdx(\"p\", null, mdx(\"figure\", {\n parentName: \"p\",\n \"className\": \"gatsby-resp-image-figure\",\n \"style\": {}\n }, \"\\n \", mdx(\"span\", {\n parentName: \"figure\",\n \"className\": \"gatsby-resp-image-wrapper\",\n \"style\": {\n \"position\": \"relative\",\n \"display\": \"block\",\n \"marginLeft\": \"auto\",\n \"marginRight\": \"auto\",\n \"maxWidth\": \"1035px\"\n }\n }, \"\\n \", mdx(\"a\", {\n parentName: \"span\",\n \"className\": \"gatsby-resp-image-link\",\n \"href\": \"/static/973ad67091767095c3feef2340efe424/b0b21/step-5.png\",\n \"style\": {\n \"display\": \"block\"\n },\n \"target\": \"_blank\",\n \"rel\": [\"noopener\"]\n }, \"\\n \", mdx(\"span\", {\n parentName: \"a\",\n \"className\": \"gatsby-resp-image-background-image\",\n \"style\": {\n \"paddingBottom\": \"35.13513513513513%\",\n \"position\": \"relative\",\n \"bottom\": \"0\",\n \"left\": \"0\",\n \"backgroundImage\": \"url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAHCAYAAAAIy204AAAACXBIWXMAAAsSAAALEgHS3X78AAABZklEQVQoz02QS07DMBCGcwlOgITEQ1UTJ7aT+JUm6ZMqTVuVigrBqhJsWCAhgdhyAE78M05bqYtPMx6PP48dcB7ihJR9in0knCEMe3iocgynBViWIE01lDXIlQAXrOs7ECJJog7GIgScR1RkJOPUKOlgBpVbTI3DdzvE79sWr7sGz4sWm3mD+/EMdVXDGAOlUggRH6WHoQK/URQFnCsgU0eyGjc9gUoKtDxBcXkBHUaoWYJlFmNFwtLW0KpArgtY6wiDLDvIA6UUFWxXVNrAqAF2oyGGtqQbDe6uI4SRxtWtwswN8LnfY9WsSaio33aTOueOYuufzOGlnjzPYSl+LKf4e1nha9vi53GF/WKOSTXGZNJg3SxQlSX9pTpIz9BaI4jjmP4tpZGzTigoL7XC+3KOj02Lp9kYI0fT056Ukv5ZdPH8jMfnnoAxRm8X3cI3eRJa58rQjRYx5ZwE8sip58Sp5qMf7h+7sfG599GbcAAAAABJRU5ErkJggg==')\",\n \"backgroundSize\": \"cover\",\n \"display\": \"block\"\n }\n }), \"\\n \", mdx(\"img\", {\n parentName: \"a\",\n \"className\": \"gatsby-resp-image-image\",\n \"alt\": \"降落地的地形和贴图\",\n \"title\": \"降落地的地形和贴图\",\n \"src\": \"/static/973ad67091767095c3feef2340efe424/0dc48/step-5.png\",\n \"srcSet\": [\"/static/973ad67091767095c3feef2340efe424/2c191/step-5.png 259w\", \"/static/973ad67091767095c3feef2340efe424/86b01/step-5.png 518w\", \"/static/973ad67091767095c3feef2340efe424/0dc48/step-5.png 1035w\", \"/static/973ad67091767095c3feef2340efe424/b0b21/step-5.png 1394w\"],\n \"sizes\": \"(max-width: 1035px) 100vw, 1035px\",\n \"style\": {\n \"width\": \"100%\",\n \"height\": \"100%\",\n \"margin\": \"0\",\n \"verticalAlign\": \"middle\",\n \"position\": \"absolute\",\n \"top\": \"0\",\n \"left\": \"0\"\n },\n \"loading\": \"lazy\"\n }), \"\\n \"), \"\\n \"), \"\\n \", mdx(\"figcaption\", {\n parentName: \"figure\",\n \"className\": \"gatsby-resp-image-figcaption\"\n }, \"\\u964D\\u843D\\u5730\\u7684\\u5730\\u5F62\\u548C\\u8D34\\u56FE\"), \"\\n \")), mdx(\"p\", null, \"\\u89C6\\u89D2\\u843D\\u4E0B\\u3001\\u504F\\u79FB\\u3001\\u65CB\\u8F6C\\u7684\\u90E8\\u5206\\uFF0C\\u548C\\u4E4B\\u524D\\u76F8\\u4F3C\\uFF0C\\u8BBE\\u7F6E\\u597D\\u53C2\\u6570\\u548C\\u8FC7\\u6E21\\u5373\\u53EF\\uFF0C\\u8FD9\\u91CC\\u4E0D\\u518D\\u5570\\u55E6\\uFF0C\\u8BE6\\u7EC6\\u53EF\\u4EE5\\u67E5\\u770B\\u6E90\\u7801\\u3002\"), mdx(\"h2\", null, \"\\u4E94\\u3001\\u6A21\\u578B\\u3001\\u8D34\\u56FE\\u4F18\\u5316\\u548C\\u6CE8\\u610F\\u4E8B\\u9879\"), mdx(\"h3\", null, \"\\u8D34\\u56FE\\u5927\\u5C0F\\u95EE\\u9898\"), mdx(\"p\", null, \"\\u5B9E\\u73B0\\u6548\\u679C\\u4E4B\\u540E\\uFF0C\\u5982\\u679C\\u8981\\u653E\\u5230 web \\u4E0A\\uFF0C\\u8FD8\\u6709\\u4E00\\u4E2A\\u5F88\\u4E25\\u91CD\\u7684\\u95EE\\u9898\\u5C31\\u662F\\u8D44\\u6E90\\u5927\\u5C0F\\u3002\\u4E00\\u4E2A\\u661F\\u7403\\u56FE 50MB \\u5728\\u672C\\u5730\\u8C03\\u8BD5\\u53EF\\u4EE5\\uFF0C\\u4F46\\u662F\\u653E\\u5230\\u7EBF\\u4E0A\\u662F\\u4E00\\u5B9A\\u4E0D\\u53EF\\u80FD\\u63A5\\u53D7\\u7684\\u3002\"), mdx(\"ol\", null, mdx(\"li\", {\n parentName: \"ol\"\n }, \"png \\u8D34\\u56FE\\u8F6C\\u4E3A jpg\\uFF08\\u6216\\u8005\\u66F4\\u597D\\u7684 basis \\u683C\\u5F0F\\uFF09\\uFF0C\\u7136\\u540E\\u54C1\\u8D28\\u8BBE\\u4E3A 60% \\u6216\\u8005\\u80FD\\u63A5\\u53D7\\u7684\\u7A0B\\u5EA6\\uFF0C\\u53EA\\u770B\\u6548\\u679C\\u7684\\u8BDD\\uFF0C50MB \\u538B\\u7F29\\u5230 4.94MB \\u6700\\u540E\\uFF0C\\u5E76\\u6CA1\\u6709\\u5F88\\u5F71\\u54CD\\u89C2\\u611F\\u3002\"), mdx(\"li\", {\n parentName: \"ol\"\n }, \"\\u53E6\\u4E00\\u65B9\\u9762\\u662F\\u88C1\\u526A\\u4E0D\\u9700\\u8981\\u7684\\u6A21\\u578B\\u548C\\u8D34\\u56FE\\uFF0C\\u4F8B\\u5982\\u5176\\u4E2D\\u4E00\\u4E9B\\u6A21\\u578B\\u7684\\u8D34\\u56FE\\u5E76\\u4E0D\\u9700\\u8981\\uFF0C\\u90A3\\u4E48\\u53EF\\u4EE5\\u4ECE\\u6A21\\u578B\\u4E2D\\u76F4\\u63A5\\u5220\\u9664\\u3002\"), mdx(\"li\", {\n parentName: \"ol\"\n }, \"\\u6700\\u540E\\u662F\\u5728 three.js/editor \\u4E2D\\u505A\\u4E00\\u70B9\\u7B80\\u5355\\u7684\\u538B\\u7F29\\u548C\\u9876\\u70B9\\u5904\\u7406\\u3002\")), mdx(\"h3\", null, \"fbx \\u6A21\\u578B\\u8D34\\u56FE\\u95EA\\u70C1\\u95EE\\u9898\"), mdx(\"p\", null, \"fbx \\u5B9E\\u73B0\\u4E4B\\u540E\\uFF0C\\u6548\\u679C\\u8FD8\\u53EF\\u4EE5\\uFF0C\\u4F46\\u662F\\u8D34\\u56FE\\u4E00\\u90E8\\u5206\\u533A\\u57DF\\u51FA\\u73B0\\u95EA\\u70C1\\u7684\\u60C5\\u51B5\\uFF0C\\u53EF\\u80FD\\u662F\\u56E0\\u4E3A\\u540E\\u7EED\\u53D8\\u66F4\\u6750\\u8D28\\u7684\\u539F\\u56E0\\uFF0C\\u603B\\u4E4B\\u6548\\u679C\\u5F88\\u5DEE\\uFF0C\\u6700\\u540E\\u4F7F\\u7528 three.js/editor \\u8F6C\\u6362\\u6210\\u4E86 glTF \\u6A21\\u578B\\uFF0C\\u80FD\\u591F\\u5F88\\u597D\\u7684\\u5B9E\\u73B0\\u6548\\u679C\\uFF0C\\u751A\\u81F3\\u5C06\\u8D34\\u56FE\\u76F4\\u63A5\\u5D4C\\u5165\\u6A21\\u578B\\u6587\\u4EF6\\u4E2D\\u5B9E\\u73B0\\u66F4\\u5C0F\\u7684\\u4E8C\\u8FDB\\u5236\\u6587\\u4EF6\\u3002\"), mdx(\"h3\", null, \"glTF \\u6A21\\u578B\\u7684\\u989C\\u8272\\u7A7A\\u95F4\"), mdx(\"p\", null, \"\\u8F6C\\u6210 glTF \\u6A21\\u578B\\u4E4B\\u540E\\uFF0C\\u95EA\\u70C1\\u95EE\\u9898\\u89E3\\u51B3\\u4E86\\uFF0C\\u4F46\\u662F\\u989C\\u8272\\u5DEE\\u522B\\u7279\\u522B\\u5927\\uFF0C\\u4EE5\\u4E3A\\u662F\\u6750\\u8D28\\u95EE\\u9898\\u3001\\u5149\\u7EBF\\u95EE\\u9898\\u7B49\\uFF0C\\u8C03\\u8BD5\\u5F88\\u4E45\\u4E4B\\u540E\\u624D\\u53D1\\u73B0 \", mdx(\"a\", {\n parentName: \"p\",\n \"href\": \"https://threejs.org/docs/index.html#examples/en/loaders/GLTFLoader\"\n }, \"\\u5B98\\u7F51\\u6587\\u6863 glTF\"), \" \\u8BF4\\u7684\\u989C\\u8272\\u7A7A\\u95F4\\u95EE\\u9898\\u3002\"), mdx(\"pre\", null, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-ts\"\n }, \"renderer.outputEncoding = THREE.sRGBEncoding;\\n\")), mdx(\"p\", null, mdx(\"figure\", {\n parentName: \"p\",\n \"className\": \"gatsby-resp-image-figure\",\n \"style\": {}\n }, \"\\n \", mdx(\"span\", {\n parentName: \"figure\",\n \"className\": \"gatsby-resp-image-wrapper\",\n \"style\": {\n \"position\": \"relative\",\n \"display\": \"block\",\n \"marginLeft\": \"auto\",\n \"marginRight\": \"auto\",\n \"maxWidth\": \"1024px\"\n }\n }, \"\\n \", mdx(\"a\", {\n parentName: \"span\",\n \"className\": \"gatsby-resp-image-link\",\n \"href\": \"/static/87040a9731b3c27d3976e25cbb09dbc1/b846d/output-encoding.jpg\",\n \"style\": {\n \"display\": \"block\"\n },\n \"target\": \"_blank\",\n \"rel\": [\"noopener\"]\n }, \"\\n \", mdx(\"span\", {\n parentName: \"a\",\n \"className\": \"gatsby-resp-image-background-image\",\n \"style\": {\n \"paddingBottom\": \"88.8030888030888%\",\n \"position\": \"relative\",\n \"bottom\": \"0\",\n \"left\": \"0\",\n \"backgroundImage\": \"url('data:image/jpeg;base64,/9j/2wBDABALDA4MChAODQ4SERATGCgaGBYWGDEjJR0oOjM9PDkzODdASFxOQERXRTc4UG1RV19iZ2hnPk1xeXBkeFxlZ2P/2wBDARESEhgVGC8aGi9jQjhCY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2P/wgARCAASABQDASIAAhEBAxEB/8QAFwABAQEBAAAAAAAAAAAAAAAAAAUEA//EABcBAQEBAQAAAAAAAAAAAAAAAAIBAAP/2gAMAwEAAhADEAAAAZmudoKpuDWRoKbIHT//xAAbEAACAgMBAAAAAAAAAAAAAAABAgARAzEyIv/aAAgBAQABBQJNr6liLdISjAWF7ybXn//EABYRAQEBAAAAAAAAAAAAAAAAABAhQf/aAAgBAwEBPwGGH//EABURAQEAAAAAAAAAAAAAAAAAACAh/9oACAECAQE/AaP/xAAaEAACAgMAAAAAAAAAAAAAAAAAARARAiIx/9oACAEBAAY/ArxFXTZzYoR//8QAHRAAAgICAwEAAAAAAAAAAAAAAAEhMRFBEGGhgf/aAAgBAQABPyG2Jd7MPrN4Gx0tRA0WI0PiVOy6Jno4PMj/2gAMAwEAAgADAAAAEDzXw//EABkRAAMAAwAAAAAAAAAAAAAAAAABERAhQf/aAAgBAwEBPxCtuFT5gj//xAAaEQACAgMAAAAAAAAAAAAAAAAAEQEQMUFR/9oACAECAQE/EFgKem6//8QAHhABAAICAgMBAAAAAAAAAAAAAQARITFBUXGhsfD/2gAIAQEAAT8QDQFWAWLoYxFKO2DziJAsNarO3G5u7kupQA4racbi1LG8T1f2Ymof3cE//9k=')\",\n \"backgroundSize\": \"cover\",\n \"display\": \"block\"\n }\n }), \"\\n \", mdx(\"img\", {\n parentName: \"a\",\n \"className\": \"gatsby-resp-image-image\",\n \"alt\": \"颜色空间问题\",\n \"title\": \"颜色空间问题\",\n \"src\": \"/static/87040a9731b3c27d3976e25cbb09dbc1/b846d/output-encoding.jpg\",\n \"srcSet\": [\"/static/87040a9731b3c27d3976e25cbb09dbc1/fca29/output-encoding.jpg 259w\", \"/static/87040a9731b3c27d3976e25cbb09dbc1/f4507/output-encoding.jpg 518w\", \"/static/87040a9731b3c27d3976e25cbb09dbc1/b846d/output-encoding.jpg 1024w\"],\n \"sizes\": \"(max-width: 1024px) 100vw, 1024px\",\n \"style\": {\n \"width\": \"100%\",\n \"height\": \"100%\",\n \"margin\": \"0\",\n \"verticalAlign\": \"middle\",\n \"position\": \"absolute\",\n \"top\": \"0\",\n \"left\": \"0\"\n },\n \"loading\": \"lazy\"\n }), \"\\n \"), \"\\n \"), \"\\n \", mdx(\"figcaption\", {\n parentName: \"figure\",\n \"className\": \"gatsby-resp-image-figcaption\"\n }, \"\\u989C\\u8272\\u7A7A\\u95F4\\u95EE\\u9898\"), \"\\n \")), mdx(\"hr\", null), mdx(\"p\", null, \"\\u6700\\u540E\\u7684\\u6E90\\u7801\\u5305\\u542B\\u4E86\\u5F88\\u591A\\u7684\\u5C1D\\u8BD5\\u548C\\u5904\\u7406\\uFF0C\\u6BD4\\u6587\\u7AE0\\u8FD9\\u4E00\\u70B9\\u4EE3\\u7801\\u6709\\u5F88\\u591A\\u4E0D\\u540C\\uFF1A\"), mdx(SourceCodeLink, {\n url: \"https://cnb.cool/ubug/super-globe/super-globe\",\n name: \"super-globe\",\n desc: \"move miui 12 super wallpaper to web\",\n mdxType: \"SourceCodeLink\"\n }), mdx(\"hr\", null));\n}\n;\nMDXContent.isMDXComponent = true;"}},"pageContext":{"isCreatedByStatefulCreatePages":false,"id":"7a4db9ef-9f76-5854-b2fa-b70aa7635e36","prev":{"fileAbsolutePath":"D:/ubug/storybook/content/blog/marry/marry.md","id":"efef442d-0f5c-556e-a942-17e00d70eb08","parent":{"name":"marry","sourceInstanceName":"blog"},"excerpt":"…","fields":{"title":"💒 结婚撸个相册 🎈🎉💖💗💕💘","slug":"/blog/marry","description":"看到自己的爱人穿上婚纱的样子，心里藏不住的开心","date":"2020-07-10","redirects":null,"datetime":"2020-07-10 20:08:10","categories":["think"],"series":null,"tags":["美好"],"status":"online"},"frontmatter":{"published":null,"tags":["美好"],"theme":null,"slug":"marry","date":"2020-07-10 20:08:10"},"body":"const _excluded = [\"components\"];\nfunction _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }\nfunction _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) o = n[r], -1 === t.indexOf(o) && {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }\nfunction _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }\n/* @jsx mdx */\n\nconst _frontmatter = {\n \"slug\": \"marry\",\n \"title\": \"💒 结婚撸个相册 🎈🎉💖💗💕💘\",\n \"date\": \"2020-07-10 20:08:10\",\n \"author\": \"Ubug\",\n \"description\": \"看到自己的爱人穿上婚纱的样子，心里藏不住的开心\",\n \"categories\": [\"think\"],\n \"tags\": [\"美好\"],\n \"banner\": \"./banner.jpg\"\n};\nconst makeShortcode = name => function MDXDefaultShortcode(props) {\n console.warn(\"Component \" + name + \" was not imported, exported, or provided by MDXProvider as global scope\");\n return mdx(\"div\", props);\n};\nconst NoShare = makeShortcode(\"NoShare\");\nconst WithFigcaption = makeShortcode(\"WithFigcaption\");\nconst Device = makeShortcode(\"Device\");\nconst SourceCodeLink = makeShortcode(\"SourceCodeLink\");\nconst layoutProps = {\n _frontmatter\n};\nconst MDXLayout = \"wrapper\";\nreturn function MDXContent(_ref) {\n let {\n components\n } = _ref,\n props = _objectWithoutProperties(_ref, _excluded);\n return mdx(MDXLayout, _extends({}, layoutProps, props, {\n components: components,\n mdxType: \"MDXLayout\"\n }), mdx(NoShare, {\n mdxType: \"NoShare\"\n }), mdx(\"hr\", null), mdx(\"blockquote\", null, mdx(\"p\", {\n parentName: \"blockquote\"\n }, \"\\u7B2C\\u4E00\\u773C\\u770B\\u5230\\u5979\\u7A7F\\u5A5A\\u7EB1\\u7684\\u6837\\u5B50\\u7684\\u65F6\\u5019\\uFF0C\\u8BF4\\u4E0D\\u51FA\\u6765\\u7684\\u60CA\\u5947\\uFF0C\\u771F\\u7684\\u592A\\u7F8E\\u597D\\u4E86\\uFF0C\\u5FC3\\u91CC\\u7830\\u7830\\u67D4\\u8F6F\\u7684\\u611F\\u89C9\\uFF0C\\u5174\\u594B\\u53C8\\u6FC0\\u52A8\\u7684\\u60C5\\u7EEA\\uFF0C\\u60F3\\u4E0D\\u8D77\\u6765\\u53BB\\u62CD\\u7167\\uFF0C\\u53EA\\u60F3\\u76EF\\u7740\\u5979\\u7684\\u6837\\u5B50\\u523B\\u5728\\u8111\\u6D77\\u91CC\\u3002\\u5979\\u6F02\\u4EAE\\u597D\\u770B\\u7684\\u65F6\\u5019\\u5F88\\u591A\\uFF0C\\u6BCF\\u6B21\\u6211\\u90FD\\u80FD\\u627E\\u5230\\u8BCD\\u5F62\\u5BB9\\uFF0C\\u4F46\\u662F\\u6B64\\u65F6\\u6B64\\u523B\\u5FC3\\u91CC\\u90A3\\u4E48\\u591A\\u60C5\\u7EEA\\uFF0C\\u5374\\u6CA1\\u529E\\u6CD5\\u8868\\u8FBE\\u51FA\\u6765\\uFF0C\\u53EA\\u662F\\u7275\\u8D77\\u4E86\\u5979\\u7684\\u624B\\uFF0C\\u7EA2\\u4E86\\u773C\\u7736\\u3002\")), mdx(\"hr\", null), mdx(\"p\", null, \"\\u6700\\u7EC8\\u6548\\u679C\\u53EF\\u4EE5\\u5230\\uFF1A\", mdx(\"a\", {\n parentName: \"p\",\n \"href\": \"/studio/marry\"\n }, \"\\u9884\\u89C8\\u9875\\u9762\")), mdx(\"h2\", null, \"\\u3007\\u3001\\u76EE\\u7684\"), mdx(\"p\", null, \"\\u521A\\u6536\\u5230\\u7ED3\\u5A5A\\u7167\\u7684\\u65F6\\u5019\\u5C31\\u611F\\u89C9\\u592A\\u6F02\\u4EAE\\u4E86\\uFF0C\\u5C24\\u5176\\u662F\\u7231\\u4EBA\\u7A7F\\u4E0A\\u5A5A\\u7EB1\\u975E\\u5E38\\u597D\\u770B\\u7684\\u6837\\u5B50\\uFF0C\\u7B2C\\u4E00\\u65F6\\u95F4\\u5206\\u4EAB\\u7ED9\\u5BB6\\u4EBA\\uFF0C\\u4F46\\u662F\\u9AD8\\u6E05\\u56FE\\u51E0\\u5341\\u5146\\uFF0C\\u5FAE\\u4FE1\\u4E00\\u4E2A\\u4E2A\\u53D1\\u771F\\u7684\\u592A\\u5357\\u4E86\\uFF0C\\u653E\\u5230\\u7F51\\u76D8\\u4EC0\\u4E48\\u7684\\u5F88\\u4E0D\\u653E\\u5FC3\\uFF0C\\u5A5A\\u793C\\u7EAA\\u4E4B\\u7C7B\\u7684\\u6CA1\\u6709\\u76F8\\u518C\\u529F\\u80FD\\uFF0C\\u4E8E\\u662F\\u60F3\\u505A\\u4E00\\u4E2A\\u5728\\u7EBF\\u76F8\\u518C\\uFF0C\\u5305\\u62EC\\u7535\\u5B50\\u8BF7\\u67EC\\u3001\\u52A0\\u4E0A\\u795D\\u798F\\u5899\\u611F\\u89C9\\u4F1A\\u5F88\\u4E0D\\u9519\\uFF0C\\u8001\\u672C\\u884C\\u80FD\\u7528\\u4E0A\\u4E86\\u3002\"), mdx(\"div\", {\n style: {\n display: 'flex',\n justifyContent: 'center'\n }\n }, mdx(WithFigcaption, {\n title: \"\\u7B80\\u5355\\u5C55\\u793A\",\n mdxType: \"WithFigcaption\"\n }, mdx(Device, {\n mdxType: \"Device\"\n }, mdx(\"video\", {\n autoPlay: true,\n loop: true,\n controls: true,\n style: {\n width: '100%'\n }\n }, mdx(\"source\", {\n src: \"https://fdb.ubug.io/storybook-videos/marry.mp4\",\n type: \"video/mp4\"\n }))))), mdx(\"h2\", null, \"\\u4E00\\u3001\\u7535\\u5B50\\u76F8\\u518C\"), mdx(\"p\", null, \"\\u7535\\u5B50\\u8BF7\\u67EC\\u8BF4\\u767D\\u4E86\\u5C31\\u662F\\u5E7B\\u706F\\u7247\\u561B\\uFF0C\\u4E5F\\u5C31\\u662F\\u9875\\u9762\\u5207\\u6362\\u52A0\\u4E0A\\u5143\\u7D20\\u52A8\\u753B\\uFF0C\\u5177\\u4F53\\u5B9E\\u73B0\\u4E0A\\uFF0C\\u76D1\\u542C\\u6ED1\\u52A8\\u7684\\u4E8B\\u4EF6\\uFF0C\\u6839\\u636E\\u6ED1\\u52A8\\u8DDD\\u79BB\\u6765\\u5904\\u7406\\u7FFB\\u9875\\u7684\\u4E8B\\u60C5\\uFF0C\\u6211\\u8FD9\\u8FB9\\u56FE\\u5FEB\\u627E\\u4E86\\u4E00\\u4E2A\\u7FFB\\u9875\\u7684\\u5E93\\uFF0C\\u76F4\\u7528\\u4E86\\u8FDB\\u6765\\u3002\"), mdx(SourceCodeLink, {\n url: \"https://github.com/lipten/slidePage\",\n name: \"slidePage\",\n desc: \"\\u7B80\\u5355\\u3001\\u8DE8\\u5E73\\u53F0\\u3001\\u65E0\\u4F9D\\u8D56\\u7684\\u5168\\u5C4F\\u6EDA\\u52A8H5\\u63D2\\u4EF6\\uFF0C\\u53EF\\u5B9E\\u73B0\\u5185\\u5BB9\\u8D85\\u51FA\\u5C4F\\u5E55\\u6EDA\\u52A8\\u3001\\u52A8\\u6001\\u66F4\\u65B0\\u7B49\\u7279\\u8272\\u529F\\u80FD\",\n mdxType: \"SourceCodeLink\"\n }), mdx(\"p\", null, \"\\u53EF\\u60DC\\u4E0D\\u662F TypeScript \\u7684\\uFF0C\\u4E0D\\u8FC7\\u591F\\u7528\\u4E86\\uFF0C\\u800C\\u4E14 2.4k after gzipped\\u3002\"), mdx(\"p\", null, \"\\u518D\\u5F15\\u5165 \", mdx(\"a\", {\n parentName: \"p\",\n \"href\": \"https://cdn.jsdelivr.net/npm/animate.css@3.5.2/animate.min.css\"\n }, \"https://cdn.jsdelivr.net/npm/animate.css@3.5.2/animate.min.css\")), mdx(\"p\", null, \"\\u76F8\\u5F53\\u4E8E\\u5185\\u7F6E\\u4E03\\u5341\\u591A\\u79CD\\u52A8\\u753B\\u6548\\u679C\\u5B9E\\u73B0\\u5143\\u7D20\\u8FDB\\u5165\"), mdx(\"div\", {\n style: {\n display: 'flex',\n justifyContent: 'center'\n }\n }, mdx(WithFigcaption, {\n title: \"\\u7B80\\u5355\\u5C55\\u793A\",\n mdxType: \"WithFigcaption\"\n }, mdx(Device, {\n mdxType: \"Device\"\n }, mdx(\"video\", {\n autoPlay: true,\n loop: true,\n controls: true,\n style: {\n width: '100%'\n }\n }, mdx(\"source\", {\n src: \"https://fdb.ubug.io/storybook-videos/marry-slider.mp4\",\n type: \"video/mp4\"\n }))))), mdx(\"p\", null, \"\\u6700\\u540E\\u7B80\\u5355\\u5C01\\u88C5\\u4E00\\u4E2A AniBlock: \\u7B80\\u5355\\u7528\\u53C2\\u6570\\u63A7\\u5236\\u4E00\\u5F20\\u56FE\\u7247\\u7684\\u8FDB\\u573A\\uFF0C\\u7136\\u540E\\u5C31\\u80FD\\u62FC\\u51FA\\u6765\\u5168\\u90E8\\u7684\\u52A8\\u753B\\u6548\\u679C\\u4E86\\u3002\"), mdx(\"pre\", null, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-tsx\"\n }, \"\\n \\n\\n\")), mdx(\"p\", null, \"\\u8FD9\\u91CC\\u7684\\u52A8\\u753B\\u8BBE\\u7F6E\\u53EF\\u4EE5\\u5C06\\u4F4D\\u7F6E\\u3001\\u65F6\\u95F4\\u3001\\u5EF6\\u8FDF\\u4F5C\\u4E3A\\u53EF\\u89C6\\u5316\\u7684\\u4E00\\u4E2A\\u53D8\\u91CF\\uFF0C\\u7136\\u540E\\u505A\\u4E00\\u4E2A\\u53EF\\u89C6\\u5316\\u7684\\u52A8\\u753B\\u7F16\\u8F91\\u5668\\u3002\"), mdx(\"blockquote\", null, mdx(\"p\", {\n parentName: \"blockquote\"\n }, \"\\u5F53\\u7136\\u5E7B\\u706F\\u7247\\u90E8\\u5206\\u4E5F\\u53EF\\u4EE5\\u81EA\\u5DF1\\u5B9E\\u73B0\\uFF0C\\u6ED1\\u52A8\\u7684\\u8FC7\\u7A0B\\u4E2D\\u7528 touchstart\\u3001touchmove\\u3001touchend\\u3001transitionend \\u4E8B\\u4EF6\\u6765\\u63A7\\u5236\\u4F4D\\u7F6E\\u548C\\u52A8\\u753B\\uFF0Ctransform translate3d \\u6837\\u5F0F\\u5C5E\\u6027\\u6765\\u63A7\\u5236\\u79FB\\u52A8\\u5B9E\\u73B0\\u5E7B\\u706F\\u7247\\u7684\\u90E8\\u5206\\u3002\")), mdx(\"h2\", null, \"\\u4E8C\\u3001\\u7535\\u5B50\\u76F8\\u518C\"), mdx(\"p\", null, \"\\u8FD9\\u4E2A\\u662F\\u505A\\u7684\\u4E3B\\u8981\\u76EE\\u7684\\uFF0C\\u4E5F\\u662F\\u6700\\u7B80\\u5355\\u7684\\uFF0C\\u9700\\u6C42\\u5C31\\u662F\\u628A\\u4E00\\u4E24\\u767E\\u5F20\\u9AD8\\u6E05\\u7167\\u7247\\u653E\\u5230\\u7F51\\u9875\\u4E2D\\uFF0C\\u70B9\\u51FB\\u53EF\\u4EE5\\u67E5\\u770B\\u9AD8\\u6E05\\u56FE\\uFF0C\\u53EF\\u4EE5\\u653E\\u5927\\u62D6\\u52A8\\u67E5\\u770B\\u3002\"), mdx(\"h3\", null, \"2.1 \\u9884\\u89C8 + \\u9AD8\\u6E05\\u56FE\\u7247\\u5904\\u7406\\u548C\\u538B\\u7F29\"), mdx(\"p\", null, \"\\u539F\\u56FE\\u51E0\\u5341\\u5146\\u7684\\u5927\\u5C0F\\u5728\\u7F51\\u4E0A\\u4F20\\u8F93\\u4E0D\\u592A\\u73B0\\u5B9E\\uFF0C\\u51E0\\u5146\\u7684\\u5927\\u5C0F\\u5DF2\\u7ECF\\u8DB3\\u591F\\u6E05\\u6670\\u4E86\\uFF0C\\u6240\\u4EE5\\u672C\\u5730\\u538B\\u7F29\\u4E86 60% \\u624D\\u4E0A\\u4F20\\u5230\\u817E\\u8BAF\\u4E91\\u5B58\\u50A8 COS \\u4E0A\\u7684\\uFF0C\\u5E73\\u5747\\u5927\\u5C0F 1-5 \\u5146\\u4E5F\\u591F\\u4E00\\u822C\\u4EBA\\u7684\\u52A0\\u8F7D\\u7B49\\u5F85\\u65F6\\u95F4\\u3002\"), mdx(\"p\", null, \"\\u53E6\\u4E00\\u65B9\\u9762\\u662F\\u9884\\u89C8\\u56FE\\u538B\\u7F29\\u8D28\\u91CF\\uFF0C\\u5982\\u679C\\u9884\\u89C8\\u56FE\\u4E5F\\u76F4\\u63A5\\u653E\\u539F\\u56FE\\u7684\\u8BDD\\uFF0C\\u5373\\u4F7F\\u52A0\\u4E0A\\u61D2\\u52A0\\u8F7D\\uFF0C\\u4E00\\u4E0B\\u5341\\u51E0\\u5146\\u7684\\u5927\\u5C0F\\u4E5F\\u4E0D\\u73B0\\u5B9E\\uFF0C\\u6240\\u4EE5\\u9884\\u89C8\\u56FE\\u9700\\u8981\\u5355\\u72EC\\u5904\\u7406\\uFF0C\\u597D\\u5728 COS \\u7684\\u8D44\\u6E90\\u652F\\u6301\\u514D\\u8D39\\u5904\\u7406\\uFF0C\\u53EF\\u4EE5\\u6309\\u7167\\u8D28\\u91CF\\u548C\\u5927\\u5C0F\\u6765\\u8F93\\u51FA\\u56FE\\u7247\\uFF0C\\u80FD\\u8FBE\\u5230 1M \\u4EE5\\u5185\\uFF0C\\u751A\\u81F3 100-200KB \\u7684\\u56FE\\u7247\\uFF0C\\u52A0\\u4E0A CDN \\u7F13\\u5B58\\uFF0C\\u901F\\u5EA6\\u4E5F\\u5B8C\\u5168\\u80FD\\u591F\\u63A5\\u53D7\\u3002\"), mdx(\"p\", null, mdx(\"figure\", {\n parentName: \"p\",\n \"className\": \"gatsby-resp-image-figure\",\n \"style\": {}\n }, \"\\n \", mdx(\"span\", {\n parentName: \"figure\",\n \"className\": \"gatsby-resp-image-wrapper\",\n \"style\": {\n \"position\": \"relative\",\n \"display\": \"block\",\n \"marginLeft\": \"auto\",\n \"marginRight\": \"auto\",\n \"maxWidth\": \"781px\"\n }\n }, \"\\n \", mdx(\"a\", {\n parentName: \"span\",\n \"className\": \"gatsby-resp-image-link\",\n \"href\": \"/static/667781477a440f03e61263c6bef6b902/4e427/cos-image-compress.png\",\n \"style\": {\n \"display\": \"block\"\n },\n \"target\": \"_blank\",\n \"rel\": [\"noopener\"]\n }, \"\\n \", mdx(\"span\", {\n parentName: \"a\",\n \"className\": \"gatsby-resp-image-background-image\",\n \"style\": {\n \"paddingBottom\": \"102.7027027027027%\",\n \"position\": \"relative\",\n \"bottom\": \"0\",\n \"left\": \"0\",\n \"backgroundImage\": \"url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAVCAYAAABG1c6oAAAACXBIWXMAAAsSAAALEgHS3X78AAACuUlEQVQ4y62USU9UQRDH3xczkUjUE1GiiSjbEC8uBxcC+gn8MAZFjQmCnLgKjKMDmURImIV58/Z9nyn7X8x7PLY50ckv1Wt1VXVVS57nUbVapVqtRo1Gg/r9PqENBoMLlOevalKWZWRZFtm2TUEQjNxcVnqlwjAMqV6v08HBwYXDObC6bPmoJkVRRLIsU6/XYzRNo25XZqlpuphTeN51XVaWZf3igsuQkiQhx7EpDH26jiYpikbfvm/Qz80t2q3uUfX3PoP+jmB3yM7uaLZ36rS3/4+k2p8GTc8vUeXpe5qaeUszlSWaW3jHEsxWlml2YZkeTr2iew9e0P2HLy9lYvI5vV78QNKv7b90c3yGbt2Zp/G7FQZ9HMYFj6bfsJyYfEZjt+d47Tw4c2PsCT2eXRQuqzp9+bpJq4KVz+sFn1bBRon1M+vn935cWaO1H1t45ZCOj9ukqr3reRTf96nZbHKqWJZdpEWapoLsnCyTlTgZo0ikRAzaHZk8PyI/iBnNsChKstHEpzIWMoxTRur3B2IyoUxIECcp6YbJWLbD0jCtYi7Htl2eh9R1UxgUUCq8k5D9KD98ElmWcjWoqkqqorDU0BegWlDrqCy4iL0nMiMUR16aUl6r2XAC/W63Kx7qmKUiFHc6HWq12qwUn8ioz4MVIo5JkvJNCK5pmlzLkLAOErVsDMdYww+l6zqvAUOEARYXLoMgCFmxLWKHTbphiI0GK8JhfBYYo48L4jjmMOBsJPr8OeQKfRFUpBCshDJFUVmBOowhFMF9We6xxDi3znEc1oEHZoVn8k0E2RTu5C7rw4OO47ISKIeFAG6X/8d+HkOYHQjrYCESG5sPDw+peXRUWKjrGrXbbe63Wi3+kDHG4+HCmF0enL5ygRgjNRAjRxBFJ3FyRVq5rsdrnuezxTAA7toChAyZ8h86zwDOhEa1yQAAAABJRU5ErkJggg==')\",\n \"backgroundSize\": \"cover\",\n \"display\": \"block\"\n }\n }), \"\\n \", mdx(\"img\", {\n parentName: \"a\",\n \"className\": \"gatsby-resp-image-image\",\n \"alt\": \"COS 图片处理\",\n \"title\": \"COS 图片处理\",\n \"src\": \"/static/667781477a440f03e61263c6bef6b902/4e427/cos-image-compress.png\",\n \"srcSet\": [\"/static/667781477a440f03e61263c6bef6b902/2c191/cos-image-compress.png 259w\", \"/static/667781477a440f03e61263c6bef6b902/86b01/cos-image-compress.png 518w\", \"/static/667781477a440f03e61263c6bef6b902/4e427/cos-image-compress.png 781w\"],\n \"sizes\": \"(max-width: 781px) 100vw, 781px\",\n \"style\": {\n \"width\": \"100%\",\n \"height\": \"100%\",\n \"margin\": \"0\",\n \"verticalAlign\": \"middle\",\n \"position\": \"absolute\",\n \"top\": \"0\",\n \"left\": \"0\"\n },\n \"loading\": \"lazy\"\n }), \"\\n \"), \"\\n \"), \"\\n \", mdx(\"figcaption\", {\n parentName: \"figure\",\n \"className\": \"gatsby-resp-image-figcaption\"\n }, \"COS \\u56FE\\u7247\\u5904\\u7406\"), \"\\n \")), mdx(\"h3\", null, \"2.2 \\u56FE\\u7247\\u5217\\u8868\\u7684 Gallery\"), mdx(\"p\", null, \"\\u8FD9\\u4E2A\\u7EC4\\u4EF6\\u80FD\\u591F\\u5B9E\\u73B0\\u7011\\u5E03\\u6D41\\u7684\\u5E03\\u5C40\\u5F62\\u5F0F\\uFF1A\"), mdx(SourceCodeLink, {\n url: \"https://github.com/neptunian/react-photo-gallery\",\n name: \"react-photo-gallery\",\n desc: \"React Photo Gallery\",\n mdxType: \"SourceCodeLink\"\n }), mdx(\"p\", null, mdx(\"figure\", {\n parentName: \"p\",\n \"className\": \"gatsby-resp-image-figure\",\n \"style\": {}\n }, \"\\n \", mdx(\"span\", {\n parentName: \"figure\",\n \"className\": \"gatsby-resp-image-wrapper\",\n \"style\": {\n \"position\": \"relative\",\n \"display\": \"block\",\n \"marginLeft\": \"auto\",\n \"marginRight\": \"auto\",\n \"maxWidth\": \"451px\"\n }\n }, \"\\n \", mdx(\"a\", {\n parentName: \"span\",\n \"className\": \"gatsby-resp-image-link\",\n \"href\": \"/static/95a02834beebecae8a4aad26eaa2fcb0/0b45f/gallery.jpg\",\n \"style\": {\n \"display\": \"block\"\n },\n \"target\": \"_blank\",\n \"rel\": [\"noopener\"]\n }, \"\\n \", mdx(\"span\", {\n parentName: \"a\",\n \"className\": \"gatsby-resp-image-background-image\",\n \"style\": {\n \"paddingBottom\": \"110.8108108108108%\",\n \"position\": \"relative\",\n \"bottom\": \"0\",\n \"left\": \"0\",\n \"backgroundImage\": \"url('data:image/jpeg;base64,/9j/2wBDABALDA4MChAODQ4SERATGCgaGBYWGDEjJR0oOjM9PDkzODdASFxOQERXRTc4UG1RV19iZ2hnPk1xeXBkeFxlZ2P/2wBDARESEhgVGC8aGi9jQjhCY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2P/wgARCAAWABQDASIAAhEBAxEB/8QAGQABAAIDAAAAAAAAAAAAAAAAAAIDAQQF/8QAFQEBAQAAAAAAAAAAAAAAAAAAAgH/2gAMAwEAAhADEAAAAdXMom0pqVBF0Aj/AP/EABwQAAICAgMAAAAAAAAAAAAAAAABAgMRExIhQf/aAAgBAQABBQKBtczZIhhFWEcSrEn6qev/xAAWEQEBAQAAAAAAAAAAAAAAAAAAERD/2gAIAQMBAT8BTK//xAAWEQADAAAAAAAAAAAAAAAAAAAAEBH/2gAIAQIBAT8BcP/EAB4QAAIBAwUAAAAAAAAAAAAAAAABIQIRMRAiMoGh/9oACAEBAAY/AoSLNnJkWXZNXhkxotx//8QAHRAAAgICAwEAAAAAAAAAAAAAAREAITFBUWFxgf/aAAgBAQABPyFgwRVqHOSwFONHs0pumhHNQ+oQZW0cUGJpeTCk1qn/2gAMAwEAAgADAAAAEJz4Q//EABgRAAMBAQAAAAAAAAAAAAAAAAABESFR/9oACAEDAQE/EHCuj2FH/8QAGBEAAwEBAAAAAAAAAAAAAAAAAAERIWH/2gAIAQIBAT8QVLwWWEn/xAAdEAEAAwEBAAMBAAAAAAAAAAABABEhMUFRYYHB/9oACAEBAAE/EHSAjR+95KXLroaDTh8Q8fbDEBOXOt/x5C8EMa11zZ1wKeVKJy8HrGwrlmhcT13pE/s//9k=')\",\n \"backgroundSize\": \"cover\",\n \"display\": \"block\"\n }\n }), \"\\n \", mdx(\"img\", {\n parentName: \"a\",\n \"className\": \"gatsby-resp-image-image\",\n \"alt\": \"竖向相册\",\n \"title\": \"竖向相册\",\n \"src\": \"/static/95a02834beebecae8a4aad26eaa2fcb0/0b45f/gallery.jpg\",\n \"srcSet\": [\"/static/95a02834beebecae8a4aad26eaa2fcb0/fca29/gallery.jpg 259w\", \"/static/95a02834beebecae8a4aad26eaa2fcb0/0b45f/gallery.jpg 451w\"],\n \"sizes\": \"(max-width: 451px) 100vw, 451px\",\n \"style\": {\n \"width\": \"100%\",\n \"height\": \"100%\",\n \"margin\": \"0\",\n \"verticalAlign\": \"middle\",\n \"position\": \"absolute\",\n \"top\": \"0\",\n \"left\": \"0\"\n },\n \"loading\": \"lazy\"\n }), \"\\n \"), \"\\n \"), \"\\n \", mdx(\"figcaption\", {\n parentName: \"figure\",\n \"className\": \"gatsby-resp-image-figcaption\"\n }, \"\\u7AD6\\u5411\\u76F8\\u518C\"), \"\\n \")), mdx(\"p\", null, \"\\u518D\\u6839\\u636E\\u6EDA\\u52A8\\u6761\\u4F4D\\u7F6E\\uFF0C\\u5B9E\\u73B0\\u4E00\\u4E2A\\u61D2\\u52A0\\u8F7D\\u7684\\u903B\\u8F91\\u5373\\u53EF\\u3002\"), mdx(\"pre\", null, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-ts\"\n }, \"useEffect(() => {\\n const handleScroll = (e: MouseEvent) => {\\n let scrollY = wrapBoxEl.current.scrollTop\\n if (\\n wrapBoxEl.current.offsetHeight + scrollY >=\\n wrapBoxEl.current.scrollHeight - 50\\n ) {\\n loadMorePhotos()\\n }\\n }\\n\\n wrapBoxEl.current.addEventListener(\\\"scroll\\\", handleScroll)\\n return () => wrapBoxEl.current.removeEventListener(\\\"scroll\\\", handleScroll)\\n})\\n\")), mdx(\"h3\", null, \"2.3 \\u70B9\\u51FB\\u653E\\u5927\\u7684 LightBox\"), mdx(\"p\", null, \"gallery \\u81EA\\u5E26\\u4E00\\u4E2A LightBox \\u7EC4\\u4EF6\\uFF0C\\u4F46\\u662F\\u4E0D\\u80FD\\u653E\\u5927\\u62D6\\u52A8\\uFF0C\\u800C\\u4E14\\u56FE\\u7247\\u6570\\u91CF\\u591A\\u4E86\\u4F1A\\u51FA\\u73B0\\u5361\\u987F\\u6027\\u80FD\\u95EE\\u9898\\u3002\"), mdx(\"p\", null, \"\\u81EA\\u5DF1\\u5355\\u72EC\\u53C8\\u627E\\u5230\\u4E86\\u4E00\\u4E2A\\u70B9\\u51FB\\u653E\\u5927\\u7684\\u7EC4\\u4EF6\\uFF0C\\u63A5\\u5230\\u4E86\\u70B9\\u51FB\\u4E8B\\u4EF6\\u4E0A\\uFF0C\\u53EF\\u4EE5\\u505A\\u5230\\u5355\\u673A\\u653E\\u5927\\u548C\\u62D6\\u52A8\\u67E5\\u770B\\u7684\\u529F\\u80FD\\u3002\"), mdx(SourceCodeLink, {\n url: \"https://github.com/tim-soft/react-spring-lightbox\",\n name: \"react-spring-lightbox\",\n desc: \"\\uD83D\\uDCF7 A flexible image gallery lightbox with native-feeling touch gestures and buttery smooth animations, built with react-spring.\",\n mdxType: \"SourceCodeLink\"\n }), mdx(\"p\", null, \"\\u4F46\\u662F\\u52A0\\u4E0A\\u591A\\u5F20\\u56FE\\u7247\\u4E4B\\u540E\\uFF0C\\u4E00\\u65B9\\u9762\\u662F\\u61D2\\u52A0\\u8F7D\\u95EE\\u9898\\uFF0C\\u53E6\\u4E00\\u65B9\\u9762\\u4E00\\u767E\\u591A\\u5F20\\u56FE\\u7247\\u7684\\u52A8\\u753B\\u7740\\u5B9E\\u5361\\u987F\\uFF0C\\u6240\\u4EE5\\u6700\\u540E\\u53BB\\u9664\\u4E86\\u591A\\u56FE\\u7247\\u6ED1\\u52A8\\u5207\\u6362\\u7684\\u529F\\u80FD\\uFF0C\\u4EC5\\u80FD\\u67E5\\u770B\\u70B9\\u51FB\\u56FE\\u7247\\uFF0C\\u6548\\u679C\\u8FD8\\u662F\\u4E0D\\u9519\\u7684\\u3002\"), mdx(\"h2\", null, \"\\u4E09\\u3001\\u795D\\u798F\\u5899\"), mdx(\"p\", null, \"\\u8FD9\\u4E2A\\u529F\\u80FD\\u539F\\u672C\\u662F\\u6253\\u7B97\\u4F7F\\u7528\\u5FAE\\u4FE1\\u516C\\u4F17\\u5E73\\u53F0\\u6216\\u8005\\u5F00\\u653E\\u5E73\\u53F0\\uFF0C\\u83B7\\u53D6\\u7528\\u6237\\u7684\\u5934\\u50CF\\u548C\\u6635\\u79F0\\uFF0C\\u53D1\\u8868\\u8BC4\\u8BBA\\uFF0C\\u6700\\u597D\\u518D\\u52A0\\u4E0A\\u6253\\u8D4F\\u7684\\u529F\\u80FD\\u3002\\u60F3\\u8C61\\u5F88\\u7F8E\\u597D\\uFF0C\\u663E\\u793A\\u5F88\\u6253\\u8138\\u3002\"), mdx(\"p\", null, \"\\u6700\\u540E\\u5B9E\\u73B0\\u7684\\u6548\\u679C\\u5C31\\u53EA\\u6709\\u4E00\\u4E2A\\u5F39\\u5E55\\u5899\\uFF0C\\u53EF\\u4EE5\\u8BC4\\u8BBA\\uFF0C\\u6253\\u8D4F\\u529F\\u80FD\\u53D8\\u6210\\u4E86\\u6253\\u8D4F\\u4E8C\\u7EF4\\u7801\\u3002\"), mdx(\"p\", null, \"\\u5F39\\u5E55\\u529F\\u80FD\\u4F7F\\u7528\\u7684\\u662F\\uFF1A\"), mdx(SourceCodeLink, {\n url: \"https://github.com/zerosoul/rc-bullets\",\n name: \"rc-bullets\",\n desc: \"\\uD83C\\uDF08 \\u57FA\\u4E8ECSS3 Animation\\uFF0C\\u4F7F\\u7528React\\u6784\\u5EFA\\u7684\\u5F39\\u5E55\\u7EC4\\u4EF6\",\n mdxType: \"SourceCodeLink\"\n }), mdx(\"p\", null, \"\\u8FD9\\u4E2A\\u7EC4\\u4EF6\\u7A0D\\u5FAE\\u4FEE\\u6539\\u4E86\\u4E00\\u4E9B\\uFF0C\\u66F4\\u7B26\\u5408\\u6574\\u4E2A\\u76F8\\u518C\\u7684\\u98CE\\u683C\\u3002\"), mdx(\"p\", null, mdx(\"figure\", {\n parentName: \"p\",\n \"className\": \"gatsby-resp-image-figure\",\n \"style\": {}\n }, \"\\n \", mdx(\"span\", {\n parentName: \"figure\",\n \"className\": \"gatsby-resp-image-wrapper\",\n \"style\": {\n \"position\": \"relative\",\n \"display\": \"block\",\n \"marginLeft\": \"auto\",\n \"marginRight\": \"auto\",\n \"maxWidth\": \"441px\"\n }\n }, \"\\n \", mdx(\"a\", {\n parentName: \"span\",\n \"className\": \"gatsby-resp-image-link\",\n \"href\": \"/static/458b449e3e1c28c1ee09e955e46aeabe/112e1/bullets.png\",\n \"style\": {\n \"display\": \"block\"\n },\n \"target\": \"_blank\",\n \"rel\": [\"noopener\"]\n }, \"\\n \", mdx(\"span\", {\n parentName: \"a\",\n \"className\": \"gatsby-resp-image-background-image\",\n \"style\": {\n \"paddingBottom\": \"201.15830115830119%\",\n \"position\": \"relative\",\n \"bottom\": \"0\",\n \"left\": \"0\",\n \"backgroundImage\": \"url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAoCAYAAAD+MdrbAAAACXBIWXMAAAsSAAALEgHS3X78AAAJP0lEQVRIx42XCVBV1xnHLzuPTRGEhwjygPd4Dx677Ot7vPdkExCjiEbRKIkrm4C4oRiXWhdiXBKNZlFxiVtcatKpWdrORGNSTNUxmqTtdFI7bSfONJMmrYn21+9eYsckdqZ35j/nnO+c+z//c853z/ddJSEhgZKSEiorK6moqKC8vByXy4XT6cThcHyHMsrKyh5qD0G1PbAXFBRgNBpRiouLNUNKSgpWqxWLxYLJZCIuLo5YQyyxsbFaXWtL3WAwPBIqYW5uLoqqKCMzk8ysLNIyMkhJTSVJiM1mCwkms0yQqNlSUlK1yYwymcmU8D2oylQRdrt9iDDZbMZqMmIWBcYx0cRGRmKMNQipCXOC2BPiv4PxofIhyDijMX6IsFL2zTnjCeoW91C9qIPq1k6qFrWTlFVCuN7EqKgkIqKs6KOSCR8t9dFWQRL6URaBWZBA+CgT0WOMsp9CWDt+PNXP7WXGex8y7Z13efL3f6PjLtif3oeiJKEMK0EJLMRtWBHuw4rxCMzF3T8LN106bj5W3HwTUTxjCQkzykGWoagnO2luJ/PX7qS5t5/mVf3M3/AclRVzSIt1MdZax/DICjxGlOETYsNzeD7eQTl4+afj4ZuMl18KireFkeEJOB2iUHWRVfYqBiY0sdsxgf2PNfFK/XQOTJ7FtpJadmSV4UypRQmQwUHFUuah6LLxCsjG3S8Nz8A03H3ShNAypLCmtpZxaU4a8xqYmDWRhoIpTM4X5E5miauBvoqpVOdNIdVaT0bieDKtVVgSKvAeUYyPqPUKyhTysYQKYV3teJS62jp8I2wo+hqUUbV4RjWgjJyEo+BxPp0wg8HHp3C9bQ6/W9nBLSk/rHfwmwkOcpInilqH7G0him8Ow0It1NfXoVRVVRIQPQ6fMVPxGzMNP0MTHrHNWAqWsLa+k/UNnaybvpR1M5fTN6WLrZPn8eK8xRRWdGPIa8GcOwdjVhPxicVUlDtRqquq8IudgE9SC77mp/BJ68KrbKds7iHZj5Mo408LzojDnpDPah+LXr7Jurf+wctnL/D8q6fZe+Icb3xwg7Zlq8nOGituU1ODLrYeXX4f/qXr8a15iVHTDqN/4jT6WefQN54k7LHjhFUNEGLfw5y151l7cJAVu86zfMcZlmw5woa9rzO5aQEF+fLpVVZWoIsZjy67F6XhVao7BtjWvod3FrRwrXcpVzes48rypVzbuJErfWu4NG0Kp6Y9QXDxVtwzNsrKVuAW10JITDHOMvFZ9SYJMNTgY+1BmXgc56Yz7Oj8CQPzOjjRvZITS9dwvGMpJ5eu5tiiJZxqaqa/qQdf5z7c87bjm/40HuYeRsY5hbB4iDAooRElv5+qmo0cbVzF9rk9bFvYy+7WPo629zIgONSzlgOdT7O3qZXnZneT3nQYZWw/3hkb8LCuJdRUidNepBLaGWZ5HM+6I1TM3M3z41vkVJexcX4f2+b0cKC5hT3Tn+Jg12qOdizj4OwWDrb2UtRyDt/yAYJLtqOkbiTEXCeE4kJldhsBKTPxn32OgK7L6HreJ7DnMiM2fUzIkrPyPcdQWzeb1/YeYv3mbWzac5AtJ9+lVw5iydaDPHP4Lda8Mkh4Yi0Om0poK8U/uQm/BT/Hf9UgutUfoVt1naCtnzHssU1CGM2Mpc/w68Eb7D58nBfETV6+MMj2U2+x+fDrDLz5Pjt+9gnh4uhDhKLQz9yI/9yzjNh2g/AXbhKw7Q/4d74pH346XsoYQhbuQn/sT4SmTCJ4RDLBTcdIXXyJvtYTrG4/z8r2X1HlXEBRkbiNeinqYmpwazyEz5YbBL5wC999f8WrRRzaL1muJgPuceX4NMt1FmhF8YlDmXkAy5rrrH9ygPVtb7Jnw6dMre0mvzB7SKFvdDX1jsWsmt5L14wtdE3vp6tqGYtN4+i0lEvpYHFMKR2xNoGdnvoVLJm2mdWulawtWsxPc9upt7ootMkpl4rC4JhxHLI6OZ9q51TBXN6o6+SsfR6nMiYLJvFaZgPHE2t4VVzjmHkCpwue4nR+My8Fu9jjV8KARyEzQ5LJd8olYxPCoCgbu9Jn8EbxXC40ruRCw3JeL2/hFa809nsP4YBPOgPeqRwJc3E0so4jI8s5HlHJ6UgnF8KdzIvKILesVPxQCL0j7ViSp1OdOYsq1wrq5r5ITUUnruB0XOHZuMIysYemkRucQmFoNjZ7Nzk1m2md0stvu5ZzqW0ZC53l5BYXqXtox08UKrFTUOLkLkxpRpl1VJy1SVwmDMVrjJR6/IKMVJlzcCTk4ShswD6hm8zyhWSPm0lBaYOE2hxs4oIaodtoqYQ78AnOxFdfjF/KVHzDsvHwiMLb1yCEETiNOVwqsXF6ejNn5rezv6CMFbku8QQzinscw0IMuNQQYJdUojhyLCWREnwCEyWiJcr1no1n2FjcvKJw84gUlQb8A+JJjkwlIyqTjOixZBnyiEmw4RVilfcshEko1YKUeij9o3I4Y3ARFZGlzeglA7xHpuKpM+DhHomnv6jwlqW7jxbECKTuFo3in4bXCAmnMm6kPk4INYV2CsKSyA/PkCgmy/OVwT7RWt3NS15SRkk7XlRG4+YZhbuU7qLc3VPaXvES9TKEPIoRodES9Ryyh7Jk90BZVoCBwNBEQRJ+wSb8hsfLQZjw8Y9DN9yKLigBnSxbF2gSGKXfLHYTAaEZ6PTZhEfEaVmaYrPZOLB/gI9ufMx7lwf5YPAq167fFHw0VF67ydXrt7Tyv7hxi6sXr3D10odcuXKNP/7il6xYtpzs7OwhwosXL6I+9+59y//9fP3Nd5V/w59vs/PZZ7UsTiN8++23ta7PP78j+FyI73P37l0N9+/f5/bt29y5c0fs98T2Dd+ouH+Pf976jK///qX2bn9/P5kPCC9fvqwZv/rqK7744osfiVHJvv32Eeo/+Qt8+S+tumvnTjIkv9Sur8bGRjo7O2ltbaWtre17UG3t7e0aftjX1i79LS10d3drKXVRUdHQKYeHh6PX638E1R4REUGkJKAP2v9rXFRUlJZvawrj4+NJTEzUUt4fIikpSSvV/uTk5EeOUaEm/+r2aXuYnp6uJd4PkvMfQp1QJTZL6vxwEv+gLyYmhizJ0bUlq+yqVPVvIC8vj/z8/O9BtRUWFmqD1fqjoP6WlJaWair/A/iLLXs1YiRFAAAAAElFTkSuQmCC')\",\n \"backgroundSize\": \"cover\",\n \"display\": \"block\"\n }\n }), \"\\n \", mdx(\"img\", {\n parentName: \"a\",\n \"className\": \"gatsby-resp-image-image\",\n \"alt\": \"弹幕墙\",\n \"title\": \"弹幕墙\",\n \"src\": \"/static/458b449e3e1c28c1ee09e955e46aeabe/112e1/bullets.png\",\n \"srcSet\": [\"/static/458b449e3e1c28c1ee09e955e46aeabe/2c191/bullets.png 259w\", \"/static/458b449e3e1c28c1ee09e955e46aeabe/112e1/bullets.png 441w\"],\n \"sizes\": \"(max-width: 441px) 100vw, 441px\",\n \"style\": {\n \"width\": \"100%\",\n \"height\": \"100%\",\n \"margin\": \"0\",\n \"verticalAlign\": \"middle\",\n \"position\": \"absolute\",\n \"top\": \"0\",\n \"left\": \"0\"\n },\n \"loading\": \"lazy\"\n }), \"\\n \"), \"\\n \"), \"\\n \", mdx(\"figcaption\", {\n parentName: \"figure\",\n \"className\": \"gatsby-resp-image-figcaption\"\n }, \"\\u5F39\\u5E55\\u5899\"), \"\\n \")), mdx(\"h3\", null, \"\\u8BC4\\u8BBA\\u8FC7\\u6EE4\"), mdx(\"p\", null, \"\\u4E00\\u4E2A\\u795D\\u798F\\u5899\\uFF0C\\u6D89\\u53CA\\u5230\\u7528\\u6237\\u8F93\\u5165\\uFF0C\\u5982\\u679C\\u9700\\u8981\\u6CE8\\u518C\\u767B\\u5F55\\u5C31\\u592A\\u9EBB\\u70E6\\u4E86\\uFF0C\\u4E0D\\u9700\\u8981\\u767B\\u5F55\\u6CE8\\u518C\\u7684\\u8BDD\\uFF0C\\u4E07\\u4E00\\u6709\\u4EBA\\u60F3\\u8981\\u6076\\u5FC3\\u6216\\u8005\\u4F7F\\u574F\\uFF0C\\u53D1\\u5E03\\u70B9\\u810F\\u8BDD\\u4EC0\\u4E48\\u7684\\uFF0C\\u6CA1\\u6CD5\\u63A7\\u5236\\u3002\"), mdx(\"p\", null, \"\\u4F7F\\u7528\\u7684\\u624B\\u6BB5\\u662F \\u3010\\u533F\\u540D\\u767B\\u5F55\\u3011 + \\u3010\\u8BC4\\u8BBA\\u5173\\u952E\\u8BCD\\u8FC7\\u6EE4\\u3011\\uFF1A\"), mdx(\"p\", null, \"\\u533F\\u540D\\u767B\\u5F55\\uFF1A\\u4F7F\\u7528\\u7684 BaaS LeanCloud \\u7684\\u6570\\u636E\\u5B58\\u50A8\\u7CFB\\u7EDF\\uFF0C\\u91CC\\u9762\\u5305\\u542B\\u4E86\\u533F\\u540D\\u767B\\u5F55\\u7684\\u903B\\u8F91\\uFF0C\\u533F\\u540D\\u767B\\u5F55\\u540E\\u57FA\\u672C\\u4E0A\\u80FD\\u62FF\\u5230\\u4E00\\u4E9B\\u5F88\\u57FA\\u672C\\u7684\\u4FE1\\u606F\\uFF0C\\u9650\\u5236\\u5355\\u7528\\u6237\\u53D1\\u5E03\\u9891\\u7387\\uFF0C\\u914D\\u5408 UA\\u3001IP \\u6536\\u96C6\\uFF0C\\u4E5F\\u53EF\\u4EE5\\u5C06\\u591A\\u6B21\\u53D1\\u5E03\\u7684\\u795D\\u798F\\u8054\\u7CFB\\u8D77\\u6765\\uFF0C\\u81F3\\u5C11\\u77E5\\u9053\\u7279\\u5B9A\\u7684\\u67D0\\u4E2A\\u4EBA\\u53D1\\u4E86\\u54EA\\u4E9B\\uFF0C\\u4E00\\u4E2A\\u5355\\u9875\\u8FD9\\u6837\\u7684\\u624B\\u6BB5\\u4E5F\\u8DB3\\u591F\\u4E86\\u3002\"), mdx(\"p\", null, \"\\u8BC4\\u8BBA\\u5173\\u952E\\u8BCD\\uFF1A\\u5728\\u7F51\\u4E0A\\u627E\\u4E86\\u4E00\\u4E2A\\u7B80\\u5355\\u7684\\u654F\\u611F\\u8BCD\\u5E93\\uFF0C\\u4E00\\u5343\\u591A\\u4E2A\\u810F\\u8BDD\\u3001\\u8272\\u60C5\\u3001\\u653F\\u6CBB\\u7B49\\u654F\\u611F\\u8BCD\\uFF0C\\u7136\\u540E\\u7528\\u5FEB\\u626B\\u7684\\u5F62\\u5F0F\\u5224\\u65AD\\u7528\\u6237\\u8F93\\u5165\\u662F\\u5426\\u6709\\u7981\\u7528\\u8BCD\\uFF0C\\u5982\\u679C\\u6709\\u7684\\u8BDD\\u4FDD\\u5B58\\u7684\\u65F6\\u5019\\u8BBE\\u4E3A\\u4E0D\\u53EF\\u7528\\uFF0C\\u8FD9\\u6837\\u5C31\\u4E0D\\u4F1A\\u663E\\u793A\\u5728\\u795D\\u798F\\u5899\\u4E0A\\u4E86\\uFF0C\\u540E\\u7EED\\u5982\\u679C\\u5B58\\u5728\\u8FD9\\u4E9B\\u6570\\u636E\\u8FD8\\u80FD\\u770B\\u5230\\u548C\\u54EA\\u4E2A\\u533F\\u540D\\u8D26\\u53F7\\u76F8\\u5173\\u8054\\uFF0C\\u7B80\\u5355\\u5224\\u65AD\\u662F\\u8C01\\u4E0D\\u5B89\\u597D\\u5FC3\\u3002\"), mdx(\"h2\", null, \"\\u56DB\\u3001\\u6700\\u540E\"), mdx(\"p\", null, \"\\u9879\\u76EE\\u672C\\u8EAB\\u7528\\u4E86\\u51E0\\u5929\\u65F6\\u95F4\\uFF0C\\u7528\\u4E86\\u5F88\\u591A\\u7B2C\\u4E09\\u65B9\\u7684\\u5E93\\uFF0C\\u52A0\\u4E0A COS \\u548C LeanCloud \\u540E\\u7AEF\\u670D\\u52A1\\u7684\\u914D\\u5408\\uFF0C\\u6574\\u4E2A\\u5F00\\u53D1\\u6D41\\u7A0B\\u6CA1\\u90A3\\u4E48\\u590D\\u6742\\u3002\"), mdx(\"p\", null, \"\\u6700\\u6709\\u611F\\u89C9\\u7684\\u662F\\u6BCF\\u6B21\\u8C03\\u8BD5\\u7684\\u753B\\u9762\\u90FD\\u662F\\u81EA\\u5DF1\\u548C\\u7231\\u4EBA\\u7684\\u7F8E\\u7167\\uFF0C\\u611F\\u89C9\\u8FD8\\u662F\\u5F88\\u4E0D\\u4E00\\u6837\\u7684\\u3002\"), mdx(\"h2\", null, \"\\u4E94\\u3001\\u5FAE\\u4FE1\\u5F00\\u653E\\u5E73\\u53F0\\u4E0D\\u5410\\u4E0D\\u5FEB\"), mdx(\"p\", null, \"\\u5927\\u90E8\\u5206\\u7684\\u4F20\\u64AD\\u90FD\\u5728\\u5FAE\\u4FE1\\u4E0A\\uFF0C\\u6240\\u4EE5\\u539F\\u672C\\u60F3\\u5728\\u795D\\u798F\\u5899\\u4E0A\\u4F7F\\u7528\\u5FAE\\u4FE1\\u7684\\u6570\\u636E\\uFF0C\\u81F3\\u5C11\\u62FF\\u5230\\u6635\\u79F0\\u548C\\u5934\\u50CF\\uFF0C\\u8BA9\\u4EB2\\u4EBA\\u90FD\\u6709\\u70B9\\u53C2\\u4E0E\\u611F\\uFF0C\\u4F46\\u662F\\u6700\\u540E\\u7684\\u7ED3\\u679C\\u5F88\\u8BA9\\u6211\\u611F\\u89C9\\u4E2A\\u4EBA\\u5F00\\u53D1\\u8005\\u7684\\u65E0\\u529B\\u3002\"), mdx(\"p\", null, \"\\u66FE\\u7ECF\\u7528\\u8FC7\\u5FAE\\u4FE1\\u516C\\u4F17\\u53F7\\u548C\\u5C0F\\u7A0B\\u5E8F\\uFF0C\\u53EF\\u80FD\\u662F\\u5FD8\\u4E86\\u600E\\u4E48\\u88AB\\u652F\\u914D\\u7684\\u4E86\\u3002\\u521A\\u5F00\\u59CB\\u7684\\u7B80\\u5355\\u641C\\u7D22\\u6280\\u672F\\u6587\\u6863\\u9636\\u6BB5\\uFF0C\\u5404\\u4E2A\\u6587\\u6863\\u5982\\u679C\\u82B1\\u4E86\\u51E0\\u4E2A\\u5C0F\\u65F6\\uFF0C\\u4F60\\u81F3\\u5C11\\u8FD8\\u80FD\\u6478\\u5230\\u95E8\\u9053\\uFF0C\\u660E\\u767D\\u3010\\u670D\\u52A1\\u53F7\\u3001\\u8BA2\\u9605\\u53F7\\u3001\\u5C0F\\u7A0B\\u5E8F\\u3001\\u4F01\\u4E1A\\u5FAE\\u4FE1\\u3011\\u548C\\u3010\\u5FAE\\u4FE1\\u516C\\u4F17\\u5E73\\u53F0\\u3011\\u3001\\u3010\\u5F00\\u653E\\u5E73\\u53F0\\u3011\\u3001\\u3010\\u5C0F\\u7A0B\\u5E8F\\u5E73\\u53F0\\u3011\\u3001\\u3010\\u5C0F\\u6E38\\u620F\\u5E73\\u53F0\\u3011\\u7684\\u533A\\u522B\\u3002\"), mdx(\"p\", null, \"\\u7136\\u540E\\u4E2A\\u4EBA\\u6CE8\\u518C\\u8D26\\u53F7\\u7684\\u65F6\\u5019\\u4E3A\\u4EC0\\u4E48\\u6BCF\\u4E2A\\u5E73\\u53F0\\u90FD\\u8981\\u5355\\u72EC\\u7528\\u6CA1\\u6709\\u5173\\u8054\\u8FC7\\u5176\\u4ED6\\u5E73\\u53F0\\u751A\\u81F3\\u4E0D\\u80FD\\u5173\\u8054\\u4E2A\\u4EBA\\u5FAE\\u4FE1\\u7684\\u8D26\\u53F7\\u6CE8\\u518C\\uFF0C\\u5C1D\\u8BD5\\u4E86\\u4E09\\u56DB\\u4E2A\\u90AE\\u7BB1\\u624D\\u6CE8\\u518C\\u6210\\u529F\\u3002\"), mdx(\"p\", null, \"\\u7136\\u540E\\u518D\\u7FFB\\u7FFB\\u5B98\\u65B9\\u6587\\u6863\\u51E0\\u4E2A\\u5C0F\\u65F6\\uFF0C\\u5927\\u6982\\u660E\\u767D\\u6211\\u9700\\u8981\\u7684\\u51E0\\u4E2A\\u63A5\\u53E3\\u5728\\u54EA\\uFF0C\\u9700\\u8981\\u540E\\u53F0\\u670D\\u52A1\\u5668\\u3001\\u5B89\\u5168\\u57DF\\u540D\\u3001\\u5B89\\u5168 IP\\u3001\\u56DE\\u8C03 URL \\u7B49\\uFF0C\\u660E\\u767D access_token\\u3001OpenID\\u3001UnionID\\u3001scope\\u3001jsapi_ticket \\u7684\\u7B7E\\u540D\\u7B97\\u6CD5\\u3002\\u6700\\u540E\\u7684\\u6700\\u540E\\uFF0C\\u5C1D\\u8BD5\\u7F16\\u7A0B\\u7684\\u65F6\\u5019\\u8FD8\\u6CE8\\u610F\\u5230\\u4F60\\u5FC5\\u987B\\u83B7\\u5F97\\u63A5\\u53E3\\u6743\\u9650\\uFF0C\\u4E0D\\u7136\\u90FD\\u6CA1\\u529E\\u6CD5\\u4FEE\\u6539\\u4E00\\u4E2A\\u5206\\u4EAB\\u94FE\\u63A5\\u3002\"), mdx(\"p\", null, \"\\u6211\\u80FD\\u591F\\u770B\\u5230\\u5B98\\u65B9\\u6709\\u591A\\u52AA\\u529B\\u8BA9\\u6574\\u4E2A\\u5F00\\u53D1\\u8005\\u7684\\u4F53\\u9A8C\\u66F4\\u597D\\uFF0C\\u4F46\\u662F\\u53EF\\u80FD\\u662F\\u5E73\\u53F0\\u786E\\u5B9E\\u5F88\\u5927\\u3001\\u5F00\\u53D1\\u8005\\u592A\\u591A\\u3001\\u7BA1\\u7406\\u8D77\\u6765\\u6BD4\\u8F83\\u56F0\\u96BE\\uFF0C\\u5BFC\\u81F4\\u6574\\u4E2A\\u4F53\\u9A8C\\u4E00\\u8A00\\u96BE\\u5C3D\\u3002\\u518D\\u52A0\\u4E0A\\u5927\\u5927\\u5C0F\\u5C0F\\u7684\\u516C\\u53F8\\u6574\\u5929\\u7167\\u7740\\u8FD9\\u4E9B\\u6587\\u6863\\uFF0C\\u53D1\\u7740\\u5404\\u79CD\\u5404\\u6837\\u7684\\u56FD\\u5185\\u7279\\u8272\\u7684\\u6559\\u7A0B\\uFF0C\\u5BFC\\u81F4\\u60F3\\u8981\\u89E3\\u51B3\\u95EE\\u9898\\u975E\\u5E38\\u66F2\\u6298\\u3002\"), mdx(\"p\", null, \"\\u6700\\u540E\\u5404\\u79CD\\u65B9\\u6CD5\\uFF0C\\u90FD\\u8981\\u6C42\\u60A8\\u7684\\u8D26\\u53F7\\u5FC5\\u987B\\u8BA4\\u8BC1\\uFF0C\\u4F01\\u4E1A\\u4E3B\\u4F53\\u7684\\u8BA4\\u8BC1\\u8D39\\u7528 300 \\u5757\\uFF0C\\u4E2A\\u4EBA\\u4E3B\\u4F53\\u6CA1\\u529E\\u6CD5\\u8BA4\\u8BC1\\uFF01\\uFF01\\uFF01\\u6211\\u8BF7\\u95EE\\u5982\\u679C\\u4E2A\\u4EBA\\u5F00\\u53D1\\u8005\\u6CA1\\u529E\\u6CD5\\u8BA4\\u8BC1\\uFF0C\\u6CA1\\u529E\\u6CD5\\u83B7\\u53D6\\u5230\\u90A3\\u4E9B\\u6743\\u9650\\uFF0C\\u8FD9\\u4E2A\\u5F00\\u53D1\\u8005\\u5E73\\u53F0\\u662F\\u5E72\\u561B\\u7ED9\\u4E2A\\u4EBA\\u6CE8\\u518C\\u7684\\u5462\\uFF1F\\uFF1F\\u610F\\u601D\\u5C31\\u662F\\u7528\\u7528\\u6D4B\\u8BD5\\u8D26\\u53F7\\u5457\\uFF1F\"), mdx(\"p\", null, \"\\u516C\\u4F17\\u53F7\\u5E73\\u53F0\\u7684\\u5F00\\u53D1\\u8005\\u8D26\\u53F7\\u53EA\\u80FD\\u53D1\\u53D1\\u6587\\u7AE0\\u3002\\u5F00\\u653E\\u5E73\\u53F0\\u7684\\u4E2A\\u4EBA\\u5F00\\u53D1\\u8005\\u8D26\\u53F7\\u4E00\\u70B9\\u7528\\u6CA1\\u6709\\u3002\"), mdx(\"p\", null, \"\\u6D6A\\u8D39\\u4E86\\u751F\\u547D\\u4E2D\\u7684\\u5F88\\u591A\\u4E2A\\u5C0F\\u65F6\\u624D\\u5F04\\u6E05\\u8FD9\\u4E2A\\u4E8B\\u60C5\\uFF0C\\u6700\\u540E\\u5FAE\\u4FE1 jssdk \\u4E00\\u70B9\\u4E5F\\u6CA1\\u6CD5\\u7528\\uFF0C\\u4FEE\\u6539\\u4E0B\\u5206\\u4EAB\\u51FA\\u6765\\u7684\\u94FE\\u63A5\\u7684\\u56FE\\u6807\\u90FD\\u4E0D\\u53EF\\u80FD\\uFF0C\\u4E00\\u4E2A\\u6309\\u7167\\u6807\\u51C6 web \\u89C4\\u8303\\u505A\\u7684\\u9875\\u9762\\uFF0C\\u5728\\u5FAE\\u4FE1\\u91CC\\u9762\\u50CF\\u662F\\u4E00\\u4E2A\\u4E09\\u65E0\\u7684\\u5C71\\u5BE8\\u7F51\\u7AD9\\uFF0C\\u975E\\u5E38\\u8BA9\\u4EBA\\u6C14\\u6124\\u65E0\\u8BED\\u3002\"));\n}\n;\nMDXContent.isMDXComponent = true;"},"next":{"fileAbsolutePath":"D:/ubug/storybook/content/blog/random-and-sort/random-and-sort.md","id":"90a5685e-ac35-574c-b3f0-e2405184100e","parent":{"name":"random-and-sort","sourceInstanceName":"blog"},"excerpt":"当你想要排序的时候，肯定会需要用到 sort 方案，但是请切忌排序结果没问题，但是过程是一个黑盒。 问题 需求是随机获得 0-16 的数字组合，用处是来打乱一副牌，但是需要保证两人相同的随机过程。所以做了一个种子随机数，两个人实现同样的打乱过程，初步想法。 于是： 上面的程序在浏览器里面运行没问题，重复 n…","fields":{"title":"🥧 一次意外的 Bug 竟然是因为它 ？！Array.sort 使用避坑","slug":"/blog/random-and-sort","description":"想要使用种子生成一个地图，然后遇到了一个很奇怪的问题，发现 sort 内部实现的黑盒~~~","date":"2020-06-15","redirects":null,"datetime":"2020-06-15 20:08:10","categories":["code"],"series":null,"tags":["sort","random"],"status":"online"},"frontmatter":{"published":null,"tags":["sort","random"],"theme":null,"slug":"random-and-sort","date":"2020-06-15 20:08:10"},"body":"const _excluded = [\"components\"];\nfunction _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }\nfunction _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) o = n[r], -1 === t.indexOf(o) && {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }\nfunction _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }\n/* @jsx mdx */\n\nconst _frontmatter = {\n \"slug\": \"random-and-sort\",\n \"title\": \"🥧 一次意外的 Bug 竟然是因为它 ？！Array.sort 使用避坑\",\n \"date\": \"2020-06-15 20:08:10\",\n \"author\": \"Ubug\",\n \"description\": \"想要使用种子生成一个地图，然后遇到了一个很奇怪的问题，发现 sort 内部实现的黑盒~~~\",\n \"categories\": [\"code\"],\n \"tags\": [\"sort\", \"random\"]\n};\nconst makeShortcode = name => function MDXDefaultShortcode(props) {\n console.warn(\"Component \" + name + \" was not imported, exported, or provided by MDXProvider as global scope\");\n return mdx(\"div\", props);\n};\nconst layoutProps = {\n _frontmatter\n};\nconst MDXLayout = \"wrapper\";\nreturn function MDXContent(_ref) {\n let {\n components\n } = _ref,\n props = _objectWithoutProperties(_ref, _excluded);\n return mdx(MDXLayout, _extends({}, layoutProps, props, {\n components: components,\n mdxType: \"MDXLayout\"\n }), mdx(\"hr\", null), mdx(\"blockquote\", null, mdx(\"p\", {\n parentName: \"blockquote\"\n }, \"\\u5F53\\u4F60\\u60F3\\u8981\\u6392\\u5E8F\\u7684\\u65F6\\u5019\\uFF0C\\u80AF\\u5B9A\\u4F1A\\u9700\\u8981\\u7528\\u5230 sort \\u65B9\\u6848\\uFF0C\\u4F46\\u662F\\u8BF7\\u5207\\u5FCC\\u6392\\u5E8F\\u7ED3\\u679C\\u6CA1\\u95EE\\u9898\\uFF0C\\u4F46\\u662F\\u8FC7\\u7A0B\\u662F\\u4E00\\u4E2A\\u9ED1\\u76D2\\u3002\")), mdx(\"hr\", null), mdx(\"h2\", null, \"\\u95EE\\u9898\"), mdx(\"p\", null, \"\\u9700\\u6C42\\u662F\\u968F\\u673A\\u83B7\\u5F97 0-16 \\u7684\\u6570\\u5B57\\u7EC4\\u5408\\uFF0C\\u7528\\u5904\\u662F\\u6765\\u6253\\u4E71\\u4E00\\u526F\\u724C\\uFF0C\\u4F46\\u662F\\u9700\\u8981\\u4FDD\\u8BC1\\u4E24\\u4EBA\\u76F8\\u540C\\u7684\\u968F\\u673A\\u8FC7\\u7A0B\\u3002\\u6240\\u4EE5\\u505A\\u4E86\\u4E00\\u4E2A\\u79CD\\u5B50\\u968F\\u673A\\u6570\\uFF0C\\u4E24\\u4E2A\\u4EBA\\u5B9E\\u73B0\\u540C\\u6837\\u7684\\u6253\\u4E71\\u8FC7\\u7A0B\\uFF0C\\u521D\\u6B65\\u60F3\\u6CD5\\u3002\"), mdx(\"p\", null, \"\\u4E8E\\u662F\\uFF1A\"), mdx(\"pre\", null, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-ts\"\n }, \"// \\u5F97\\u5230\\u4E00\\u4E2A\\u79CD\\u5B50\\u968F\\u673A\\u6570\\uFF08\\u53EA\\u8981\\u968F\\u673A\\uFF0C\\u4E0D\\u9700\\u8981\\u5747\\u5300\\u5206\\u5E03\\uFF0C\\u6240\\u4EE5\\u76F4\\u63A5 sin\\uFF09\\nconst seedrandom = (seed: number): () => number => {\\n let order = 0;\\n return () => Math.abs(Math.sin(seed + order++))\\n}\\n\\n\\n// \\u751F\\u6210\\u4E00\\u4E2A 0-16 \\u7684\\u968F\\u673A\\u5E8F\\u5217\\uFF0C\\u53EA\\u8981\\u6307\\u5B9A seed\\uFF0C\\u65E0\\u8BBA\\u4EC0\\u4E48\\u65F6\\u5019\\u5F97\\u5230\\u7684\\u90FD\\u662F\\u8FD9\\u4E2A\\u7ED3\\u679C\\nconst getRandom = seedrandom(10086);\\n(new Array(16).fill(0).map((v, i) => i)).sort((a, b) => getRandom() > 0.5 ? 1 : -1)\\n\\n// -> \\xA0[0, 1, 4, 2, 5, 7, 14, 9, 8, 11, 12, 13, 15, 10, 6, 3]\\n\")), mdx(\"p\", null, \"\\u4E0A\\u9762\\u7684\\u7A0B\\u5E8F\\u5728\\u6D4F\\u89C8\\u5668\\u91CC\\u9762\\u8FD0\\u884C\\u6CA1\\u95EE\\u9898\\uFF0C\\u91CD\\u590D n \\u6B21\\u8FD8\\u662F\\u8FD9\\u4E2A\\u7ED3\\u679C\\u3002\"), mdx(\"p\", null, \"\\u7ED3\\u679C\\u5728\\u6D4B\\u8BD5\\u7684\\u65F6\\u5019\\u51FA\\u73B0\\u4E86\\u95EE\\u9898\\uFF0C\\u4E24\\u4E2A\\u4EBA\\u7684\\u7ED3\\u679C\\u4E0D\\u540C\\u3002\\u6392\\u67E5\\u4E86\\u6570\\u636E\\u540C\\u6B65\\u95EE\\u9898\\u7B49\\uFF0C\\u53D1\\u73B0\\u95EE\\u9898\\u51FA\\u5728\\u8FD9\\u4E2A\\u968F\\u673A\\u5E8F\\u5217\\u7684\\u751F\\u6210\\u4E0A\\u3002\\u600E\\u4E48\\u56DE\\u4E8B\\uFF0C\\u76F8\\u540C\\u7684\\u4EE3\\u7801\\u554A\\uFF1F\\uFF1F\"), mdx(\"p\", null, \"\\u8BE6\\u7EC6\\u8BE2\\u95EE\\u4E86\\u7528\\u6237\\u73AF\\u5883\\uFF0C\\u51FA\\u95EE\\u9898\\u7684\\u6D4F\\u89C8\\u5668\\u7248\\u672C\\u6BD4\\u8F83\\u8001\\uFF0C\\u770B\\u4E86\\u4E0B\\u662F chrome 62 \\u7684\\u5185\\u6838\\uFF0C\\u81EA\\u5DF1\\u8DD1\\u4E00\\u4E0B\\uFF1A\"), mdx(\"pre\", null, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-ts\"\n }, \"const getRandom = seedrandom(10086);\\n(new Array(16).fill(0).map((v, i) => i)).sort((a, b) => getRandom() > 0.5 ? 1 : -1)\\n\\n// -> \\xA0[2, 11, 13, 7, 8, 9, 15, 1, 10, 4, 12, 3, 14, 5, 6, 0]\\n\")), mdx(\"p\", null, \"\\u590D\\u73B0\\u4E86\\u95EE\\u9898\\uFF0C\\u540C\\u65F6\\u4E5F\\u80FD\\u591F\\u5728 chrome vs safari\\uFF0C\\u6216\\u8005 chrome 80 vs chrome 62\\uFF0C\\u4E0D\\u540C\\u7684\\u6D4F\\u89C8\\u5668\\u4E0A\\u770B\\u5230\\u8FD9\\u4E2A\\u95EE\\u9898\\u7684\\u51FA\\u73B0\\uFF0C\\u6240\\u4EE5\\u8FD9\\u4E2A\\u4E00\\u5B9A\\u662F\\u6D4F\\u89C8\\u5668\\u5F15\\u64CE\\u7684\\u95EE\\u9898\\u3002\"), mdx(\"p\", null, \"\\u627E\\u5230\\u95EE\\u9898\\u7684\\u8FC7\\u7A0B\\u5F88\\u7B80\\u5355\\uFF0C\\u8FD9\\u91CC\\u5206\\u6790\\u4E0B\\uFF1A\"), mdx(\"pre\", null, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-ts\"\n }, \"// seedrandom \\u6CA1\\u95EE\\u9898\\nconst seedrandom = (seed: number): () => number => {\\n let order = 0;\\n return () => Math.abs(Math.sin(seed + order++))\\n}\\nconst getRandom = seedrandom(10086);\\n\\nconst orderedList = (new Array(16).fill(0).map((v, i) => i))\\n// [ 0, 1, 2, 3,..., 15 ]\\n\\nconst compareFunc = (a, b) => getRandom() > 0.5 ? 1 : -1\\n\\n// --- \\u4EE5\\u4E0A\\u90FD\\u6CA1\\u95EE\\u9898\\uFF0C\\u8FD0\\u884C\\u90FD\\u76F8\\u540C\\n\\n// \\u7ECF\\u8FC7\\u8FD9\\u4E2A\\u51FD\\u6570\\u8C03\\u7528\\u8F93\\u51FA\\u5C31\\u4E0D\\u4E00\\u6837\\u4E86\\norderedList.sort(compareFunc)\\n\")), mdx(\"h2\", null, \"\\u5B9A\\u4F4D\"), mdx(\"p\", null, \"\\u4E4B\\u524D\\u6709\\u542C\\u8BF4\\u8FC7\\u6392\\u5E8F\\u7B97\\u6CD5\\u5728\\u6D4F\\u89C8\\u5668\\u5185\\u90E8\\u4E0D\\u540C\\u7248\\u672C\\u7684\\u4E0D\\u540C\\u5B9E\\u73B0\\uFF0C\\u4ECA\\u5929\\u662F\\u7740\\u5B9E\\u9047\\u5230\\u4E86\\u3002\"), mdx(\"p\", null, \"\\u5177\\u4F53\\u6765\\u8BF4\\uFF0Cchrom v80 \\u7684 sort \\u548C chrom v62 \\u7684 sort \\u4E0D\\u540C\\uFF0C\\u5BFC\\u81F4\\u8C03\\u7528 getRandom \\u7684\\u987A\\u5E8F\\u4E0D\\u540C\\uFF0C\\u6700\\u540E\\u4EA7\\u751F\\u4E0D\\u540C\\u7684\\u7ED3\\u679C\\uFF1A\"), mdx(\"pre\", null, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-ts\"\n }, \"// <-- v80\\n([1,2,3,4]).sort((a, b) => {\\n console.log(a, b)\\n return a - b\\n})\\n// --> \\u8F93\\u51FA\\n2 1\\n3 2\\n4 3\\n\\n// <-- v62\\n([1,2,3,4]).sort((a, b) => {\\n console.log(a, b)\\n return a - b\\n})\\n// --> \\u8F93\\u51FA\\n1 2\\n2 3\\n3 4\\n\")), mdx(\"p\", null, \"\\u5728\\u77E5\\u9053\\u8FD9\\u4E2A\\u95EE\\u9898\\u4E4B\\u540E\\uFF0C\\u8FD9\\u4E2A\\u968F\\u673A\\u6D17\\u724C\\u8FD9\\u4E48\\u751F\\u6210\\u7B97\\u6CD5\\u5C31\\u662F\\u6709\\u95EE\\u9898\\u7684\\u4E86\\uFF0Csort \\u672C\\u8EAB\\u662F\\u4E00\\u4E2A\\u6392\\u5E8F\\u51FD\\u6570\\uFF0C\\u5B9E\\u9645\\u5F15\\u64CE\\u9ED1\\u76D2\\u6267\\u884C\\u7684\\u65F6\\u5019\\uFF0C\\u8C03\\u7528\\u6BD4\\u8F83\\u51FD\\u6570\\u662F\\u4E0D\\u56FA\\u5B9A\\u7684\\uFF0C\\u6392\\u5E8F\\u662F\\u4ECE\\u5934\\u5230\\u5C3E\\u8FD8\\u662F\\u4E8C\\u5206\\u7684\\u987A\\u5E8F\\u6709\\u4E0D\\u540C\\u7684\\u5B9E\\u73B0\\uFF0C\\u4E0D\\u80FD\\u4F5C\\u4E3A\\u53EF\\u4F9D\\u8D56\\u7684\\u7B97\\u6CD5\\u4E00\\u90E8\\u5206\\u3002\"), mdx(\"pre\", null, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-ts\"\n }, \"// \\u6700\\u7EC8\\u6D17\\u724C\\u7B97\\u6CD5\\u53D8\\u6210\\u4E86\\u8FD9\\u6837\\uFF0C\\u4E0D\\u4F7F\\u7528\\u6392\\u5E8F\\uFF0C\\u800C\\u662F\\u76F4\\u63A5\\u53D6\\u503C\\uFF0C\\u4E0D\\u4F9D\\u8D56\\u6D4F\\u89C8\\u5668\\u5185\\u90E8\\nexport const generateRandomArray = (seed: number, length: number) => {\\n let orderedList = new Array(length).fill(0).map((v, i) => i)\\n let output: number[] = []\\n let getRandom = seedrandom(seed)\\n for (let i = 0; i < length; i++) {\\n const pick = Math.floor(getRandom() * orderedList.length)\\n output.push(orderedList[pick])\\n orderedList.splice(pick, 1)\\n }\\n return output\\n}\\n\\n\")), mdx(\"h2\", null, \"\\u6DF1\\u5165\\u4E00\\u70B9\"), mdx(\"p\", null, \"\\u5148\\u770B\\u4E0B MDN \\u6587\\u6863\\uFF1A\"), mdx(\"p\", null, mdx(\"figure\", {\n parentName: \"p\",\n \"className\": \"gatsby-resp-image-figure\",\n \"style\": {}\n }, \"\\n \", mdx(\"span\", {\n parentName: \"figure\",\n \"className\": \"gatsby-resp-image-wrapper\",\n \"style\": {\n \"position\": \"relative\",\n \"display\": \"block\",\n \"marginLeft\": \"auto\",\n \"marginRight\": \"auto\",\n \"maxWidth\": \"1035px\"\n }\n }, \"\\n \", mdx(\"a\", {\n parentName: \"span\",\n \"className\": \"gatsby-resp-image-link\",\n \"href\": \"/static/a50d113c23d38a2cef1e6b121385d2ec/69c95/sort-mdn.png\",\n \"style\": {\n \"display\": \"block\"\n },\n \"target\": \"_blank\",\n \"rel\": [\"noopener\"]\n }, \"\\n \", mdx(\"span\", {\n parentName: \"a\",\n \"className\": \"gatsby-resp-image-background-image\",\n \"style\": {\n \"paddingBottom\": \"59.07335907335908%\",\n \"position\": \"relative\",\n \"bottom\": \"0\",\n \"left\": \"0\",\n \"backgroundImage\": \"url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAMCAYAAABiDJ37AAAACXBIWXMAAAsSAAALEgHS3X78AAAByklEQVQoz51Ty1LCQBDk/z/H8kVBqQelPMEJLgTyWBKeAnkHFNruJaHUo6nqmpnd2d7Znklrv98jCALMZjOEYYj5fI7NZoMoirBara6+cmQXi4WF9tbr9dXX2SRJ0NKiMcYuNNbzPPi+b6FYdjKZWNIGKkBW+4L87XaLVlmWyLIMskVRIE1TW5UqFxQ367LKVSWKZRXHcWxtVVVogZ8CU9+6XC5/kTW+jUX0AzHXdrudJVTu+Xy+ECoQoaDqVEmR56hYtSrXzVccDqg+P1EcjyhrKJY9cM8S7nlDwOoiCmxojfRUA1htQF2lrRoSsmGz0Qj++zuctzdMCI++2+sh6PeRsTBLuBwM4D4+wut04Dw8WDu+v4f/8oKQB0IeMDwcvL7CdLswd3fwb28R1FZwb24Qj8cXwo/hENN2G97TE/znZwuPB3fTKQpqlVOrjFrlRKnmUHMhp9+gokRfzZNTBiGfqyfrWXM+NeaBjOsJk2OBxImIqKnWcuosm9ZdP1JHfZZQCwsSSaeoHu6cZGXdFDXpr28bRzTN0qScTqcLoTrruq4daI1O89dooDWwjuNc9zTgyhWmlEQ5sop10aXL1MhWR2gOlST/P983gY+CVcEaK6UAAAAASUVORK5CYII=')\",\n \"backgroundSize\": \"cover\",\n \"display\": \"block\"\n }\n }), \"\\n \", mdx(\"img\", {\n parentName: \"a\",\n \"className\": \"gatsby-resp-image-image\",\n \"alt\": \"sort\",\n \"title\": \"sort\",\n \"src\": \"/static/a50d113c23d38a2cef1e6b121385d2ec/0dc48/sort-mdn.png\",\n \"srcSet\": [\"/static/a50d113c23d38a2cef1e6b121385d2ec/2c191/sort-mdn.png 259w\", \"/static/a50d113c23d38a2cef1e6b121385d2ec/86b01/sort-mdn.png 518w\", \"/static/a50d113c23d38a2cef1e6b121385d2ec/0dc48/sort-mdn.png 1035w\", \"/static/a50d113c23d38a2cef1e6b121385d2ec/69c95/sort-mdn.png 1406w\"],\n \"sizes\": \"(max-width: 1035px) 100vw, 1035px\",\n \"style\": {\n \"width\": \"100%\",\n \"height\": \"100%\",\n \"margin\": \"0\",\n \"verticalAlign\": \"middle\",\n \"position\": \"absolute\",\n \"top\": \"0\",\n \"left\": \"0\"\n },\n \"loading\": \"lazy\"\n }), \"\\n \"), \"\\n \"), \"\\n \", mdx(\"figcaption\", {\n parentName: \"figure\",\n \"className\": \"gatsby-resp-image-figcaption\"\n }, \"sort\"), \"\\n \")), mdx(\"p\", null, \"\\u91CC\\u9762\\u5C31\\u660E\\u786E\\u8BF4\\u8FD9\\u4E2A\\u6392\\u5E8F\\u7684\\u5B9E\\u73B0\\u5E76\\u4E0D\\u662F\\u6BCF\\u4E2A\\u6D4F\\u89C8\\u5668\\u90FD\\u76F8\\u540C\\u3002\"), mdx(\"p\", null, \"\\u800C\\u6211\\u4EEC\\u770B\\u6E90\\u7801\\uFF1A\"), mdx(\"h3\", null, \"Chrome_62 / V8_6.2 \\u6E90\\u7801\"), mdx(\"p\", null, \"V8_6.2 \\u5185\\u7F6E\\u7684 js \\u65B9\\u6CD5\\u5B9E\\u73B0\\uFF1A\", mdx(\"a\", {\n parentName: \"p\",\n \"href\": \"https://github.com/v8/v8/blob/6.2-lkgr/src/js/array.js#L1005\"\n }, \"https://github.com/v8/v8/blob/6.2-lkgr/src/js/array.js#L1005\")), mdx(\"p\", null, mdx(\"figure\", {\n parentName: \"p\",\n \"className\": \"gatsby-resp-image-figure\",\n \"style\": {}\n }, \"\\n \", mdx(\"span\", {\n parentName: \"figure\",\n \"className\": \"gatsby-resp-image-wrapper\",\n \"style\": {\n \"position\": \"relative\",\n \"display\": \"block\",\n \"marginLeft\": \"auto\",\n \"marginRight\": \"auto\",\n \"maxWidth\": \"481px\"\n }\n }, \"\\n \", mdx(\"a\", {\n parentName: \"span\",\n \"className\": \"gatsby-resp-image-link\",\n \"href\": \"/static/1bdcd1966cfd1c00e8291f5640f8f906/f0f37/define_method.png\",\n \"style\": {\n \"display\": \"block\"\n },\n \"target\": \"_blank\",\n \"rel\": [\"noopener\"]\n }, \"\\n \", mdx(\"span\", {\n parentName: \"a\",\n \"className\": \"gatsby-resp-image-background-image\",\n \"style\": {\n \"paddingBottom\": \"41.31274131274131%\",\n \"position\": \"relative\",\n \"bottom\": \"0\",\n \"left\": \"0\",\n \"backgroundImage\": \"url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAICAYAAAD5nd/tAAAACXBIWXMAAAsSAAALEgHS3X78AAABRUlEQVQoz42Q3W6cMBCF9/2v+ix9jl4kN91W2ZBsWAzLn8E/YAPmi1kSJVWlNkc6kkczPnPOHIyxOGcQ9YVj8pskPfHr+ZFGnvFTjrEX5iljXcQXmHOw1uK9J1bMRYoTD/jriVwUJLlGtC4KL3wVh92huxVZOXP3JLk7lRzPbXStOVcjL7WnrBuUUkhlKaqOqlVxXpK/vRupmKZpd/guOIfA4ANuXhmngHUBPSyYcb7NbB+WZcH56cbReey4JZhjyr33h+BqDLZpKMoaZUB0gZ/ZyNN1oLheads2LgX/jwschmHcbxgRYqShkiTJj3jD7zFKzWMqOV0kaVYghCAtNceXFq3Nzcjn/+u67oJblA1ea9beMfb3FJdvhO4BuiI6r5Bdh4p9rXqqqmRLlsUFZVnR9+pD8D3yxmUJf0VY3/g/bGIbXgHPh2mIt7RsWwAAAABJRU5ErkJggg==')\",\n \"backgroundSize\": \"cover\",\n \"display\": \"block\"\n }\n }), \"\\n \", mdx(\"img\", {\n parentName: \"a\",\n \"className\": \"gatsby-resp-image-image\",\n \"alt\": \"js 实现的内置方法\",\n \"title\": \"js 实现的内置方法\",\n \"src\": \"/static/1bdcd1966cfd1c00e8291f5640f8f906/f0f37/define_method.png\",\n \"srcSet\": [\"/static/1bdcd1966cfd1c00e8291f5640f8f906/2c191/define_method.png 259w\", \"/static/1bdcd1966cfd1c00e8291f5640f8f906/f0f37/define_method.png 481w\"],\n \"sizes\": \"(max-width: 481px) 100vw, 481px\",\n \"style\": {\n \"width\": \"100%\",\n \"height\": \"100%\",\n \"margin\": \"0\",\n \"verticalAlign\": \"middle\",\n \"position\": \"absolute\",\n \"top\": \"0\",\n \"left\": \"0\"\n },\n \"loading\": \"lazy\"\n }), \"\\n \"), \"\\n \"), \"\\n \", mdx(\"figcaption\", {\n parentName: \"figure\",\n \"className\": \"gatsby-resp-image-figcaption\"\n }, \"js \\u5B9E\\u73B0\\u7684\\u5185\\u7F6E\\u65B9\\u6CD5\"), \"\\n \")), mdx(\"p\", null, mdx(\"figure\", {\n parentName: \"p\",\n \"className\": \"gatsby-resp-image-figure\",\n \"style\": {}\n }, \"\\n \", mdx(\"span\", {\n parentName: \"figure\",\n \"className\": \"gatsby-resp-image-wrapper\",\n \"style\": {\n \"position\": \"relative\",\n \"display\": \"block\",\n \"marginLeft\": \"auto\",\n \"marginRight\": \"auto\",\n \"maxWidth\": \"608px\"\n }\n }, \"\\n \", mdx(\"a\", {\n parentName: \"span\",\n \"className\": \"gatsby-resp-image-link\",\n \"href\": \"/static/e824aadc0a088e0f9c4435c9ed618f1c/15ae4/inner_sort.png\",\n \"style\": {\n \"display\": \"block\"\n },\n \"target\": \"_blank\",\n \"rel\": [\"noopener\"]\n }, \"\\n \", mdx(\"span\", {\n parentName: \"a\",\n \"className\": \"gatsby-resp-image-background-image\",\n \"style\": {\n \"paddingBottom\": \"10.424710424710423%\",\n \"position\": \"relative\",\n \"bottom\": \"0\",\n \"left\": \"0\",\n \"backgroundImage\": \"url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAACCAYAAABYBvyLAAAACXBIWXMAAAsSAAALEgHS3X78AAAAaklEQVQI13WOWQ7DIBQDc/9ztorYXoCwPKI2U8J/LY0s2R/2Nq6LT1eGC6j4yU53L9S/scbgg2Ct4yyFEAIiQu+df9pUle99c7aGk4g/0vSE8ULKJ3YOHTGjOqi1Lfo88PjTl1IXMeWV/wC98Zo0gYVoXQAAAABJRU5ErkJggg==')\",\n \"backgroundSize\": \"cover\",\n \"display\": \"block\"\n }\n }), \"\\n \", mdx(\"img\", {\n parentName: \"a\",\n \"className\": \"gatsby-resp-image-image\",\n \"alt\": \"实现\",\n \"title\": \"实现\",\n \"src\": \"/static/e824aadc0a088e0f9c4435c9ed618f1c/15ae4/inner_sort.png\",\n \"srcSet\": [\"/static/e824aadc0a088e0f9c4435c9ed618f1c/2c191/inner_sort.png 259w\", \"/static/e824aadc0a088e0f9c4435c9ed618f1c/86b01/inner_sort.png 518w\", \"/static/e824aadc0a088e0f9c4435c9ed618f1c/15ae4/inner_sort.png 608w\"],\n \"sizes\": \"(max-width: 608px) 100vw, 608px\",\n \"style\": {\n \"width\": \"100%\",\n \"height\": \"100%\",\n \"margin\": \"0\",\n \"verticalAlign\": \"middle\",\n \"position\": \"absolute\",\n \"top\": \"0\",\n \"left\": \"0\"\n },\n \"loading\": \"lazy\"\n }), \"\\n \"), \"\\n \"), \"\\n \", mdx(\"figcaption\", {\n parentName: \"figure\",\n \"className\": \"gatsby-resp-image-figcaption\"\n }, \"\\u5B9E\\u73B0\"), \"\\n \")), mdx(\"p\", null, \"\\u4E0A\\u9762\\u660E\\u786E\\u8BF4\\u4E86\\u5C0F\\u4E8E\\u7B49\\u4E8E 10 \\u7684\\u6570\\u7EC4\\u7528\\u63D2\\u5165\\u6392\\u5E8F\\uFF0C\\u4E0D\\u7136\\u4F7F\\u7528\\u5FEB\\u901F\\u6392\\u5E8F\\uFF1A\"), mdx(\"p\", null, mdx(\"figure\", {\n parentName: \"p\",\n \"className\": \"gatsby-resp-image-figure\",\n \"style\": {}\n }, \"\\n \", mdx(\"span\", {\n parentName: \"figure\",\n \"className\": \"gatsby-resp-image-wrapper\",\n \"style\": {\n \"position\": \"relative\",\n \"display\": \"block\",\n \"marginLeft\": \"auto\",\n \"marginRight\": \"auto\",\n \"maxWidth\": \"385px\"\n }\n }, \"\\n \", mdx(\"a\", {\n parentName: \"span\",\n \"className\": \"gatsby-resp-image-link\",\n \"href\": \"/static/29defa986287e5445c7c6fc59453d775/fcc18/insert_sort.png\",\n \"style\": {\n \"display\": \"block\"\n },\n \"target\": \"_blank\",\n \"rel\": [\"noopener\"]\n }, \"\\n \", mdx(\"span\", {\n parentName: \"a\",\n \"className\": \"gatsby-resp-image-background-image\",\n \"style\": {\n \"paddingBottom\": \"77.99227799227799%\",\n \"position\": \"relative\",\n \"bottom\": \"0\",\n \"left\": \"0\",\n \"backgroundImage\": \"url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAQCAYAAAAWGF8bAAAACXBIWXMAAAsSAAALEgHS3X78AAAB30lEQVQ4y41T2XKjMBDk/79wH7I2rLnFZXSgC3pHSsBO4iKZKmqAknp6pnsSpRRCeC5gbgVM2cC2LVyXwdVv9H6FK/9QTtE0Le7zjDRNMVOu6wacc2zbhj2SZVmOD8d66JlD1wRIF6TxGIYRRZ6DLx7tMENIhba/o+sYfQuwUUApeYAmO8MQm3NwbYep63BJM7xdrpilQVkzFGUJbcz7uXh3i3ldH+wCaKK1fvzwntpsoagNkZeQlCehsWiDgWtqV8RWx5FYl1VkyZXFOM0wH8UOhjvllQq4fsDQNGD9iFksKIqCQG08s59zVNxae9z91vIBGNpuGHoCTf/dcCeGQYwsy2JmrENZVZimexQozwtUdU1zXF4DbsbCtAyM5ni9/IVQBlUvaY4NgUzxYgDiPIih0A8DjYEfbD8B7qDzOKEi6xTNEFWsRxVn5oj9WURRdtvsYH5dcaeqgtSW2hNDDes8jYAs9SHgXvzr88mHz8M25D1/K6EIOBT4yuIsvgGulK2QtCkDNLXuX7A4A012dfaDoS3n3emcThk+AwalhBAI5jeWTO5XyjaquVChXzJ8rF5QMSx8sEpLynIShJEfL7SCwW+P1TsBfFZOSomf4seWhXgHGUmA5Re2eH5/Ff8BDYrh1tYMCFgAAAAASUVORK5CYII=')\",\n \"backgroundSize\": \"cover\",\n \"display\": \"block\"\n }\n }), \"\\n \", mdx(\"img\", {\n parentName: \"a\",\n \"className\": \"gatsby-resp-image-image\",\n \"alt\": \"插入排序\",\n \"title\": \"插入排序\",\n \"src\": \"/static/29defa986287e5445c7c6fc59453d775/fcc18/insert_sort.png\",\n \"srcSet\": [\"/static/29defa986287e5445c7c6fc59453d775/2c191/insert_sort.png 259w\", \"/static/29defa986287e5445c7c6fc59453d775/fcc18/insert_sort.png 385w\"],\n \"sizes\": \"(max-width: 385px) 100vw, 385px\",\n \"style\": {\n \"width\": \"100%\",\n \"height\": \"100%\",\n \"margin\": \"0\",\n \"verticalAlign\": \"middle\",\n \"position\": \"absolute\",\n \"top\": \"0\",\n \"left\": \"0\"\n },\n \"loading\": \"lazy\"\n }), \"\\n \"), \"\\n \"), \"\\n \", mdx(\"figcaption\", {\n parentName: \"figure\",\n \"className\": \"gatsby-resp-image-figcaption\"\n }, \"\\u63D2\\u5165\\u6392\\u5E8F\"), \"\\n \")), mdx(\"p\", null, \"\\u5FEB\\u6392\\u91CC\\u9762\\u5C0F\\u4E8E 10 \\u4F1A\\u8C03\\u7528\\u63D2\\u5165\\u6392\\u5E8F\\uFF1A\"), mdx(\"p\", null, mdx(\"figure\", {\n parentName: \"p\",\n \"className\": \"gatsby-resp-image-figure\",\n \"style\": {}\n }, \"\\n \", mdx(\"span\", {\n parentName: \"figure\",\n \"className\": \"gatsby-resp-image-wrapper\",\n \"style\": {\n \"position\": \"relative\",\n \"display\": \"block\",\n \"marginLeft\": \"auto\",\n \"marginRight\": \"auto\",\n \"maxWidth\": \"561px\"\n }\n }, \"\\n \", mdx(\"a\", {\n parentName: \"span\",\n \"className\": \"gatsby-resp-image-link\",\n \"href\": \"/static/8aea9fd4357d84d98d236c61713ced00/dd457/quick_sort.png\",\n \"style\": {\n \"display\": \"block\"\n },\n \"target\": \"_blank\",\n \"rel\": [\"noopener\"]\n }, \"\\n \", mdx(\"span\", {\n parentName: \"a\",\n \"className\": \"gatsby-resp-image-background-image\",\n \"style\": {\n \"paddingBottom\": \"62.54826254826254%\",\n \"position\": \"relative\",\n \"bottom\": \"0\",\n \"left\": \"0\",\n \"backgroundImage\": \"url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAANCAIAAAAmMtkJAAAACXBIWXMAAAsTAAALEwEAmpwYAAABfklEQVQoz41SaWsbMRDd///P8iGlKY1JnHXBpnvrGt33drxeQiAxzSAkgeY9vTczTVlrkSoMs54G27/p/sS4mBcqBBdC1FrX+9HgY40pjvNE+J9REgE+l5jL+o1obtwelKCcLJxRpkCCkEqAAWmNVdoYY0HKmNLX4HK56N9P9vVAfzzw50P382Da1ranDIAaSim5lM8WdnAdhvz4kH49ru1zOh3DqTXHo3l5KQDXrDvOd3Ds+/y3y+OcpymNRHfLSuhK+er8/z0n52ZCKRdd3zOw58sQgGTNvLPWOjTtva93C+a86AbGqFQ6B1cNK0YkWJw1equZc273vB23e4OFuMoOkc0LY9hj4UIiHHwq2iLEASjl15jyF7Kxkni4EHCF4P11D4jB9ihEebz7LQLqRxVb46yUOqW0g5PUbEHPsh/GhdCNImI2ZsQ90pV05wmoKefc1A1chNQCGOhxnITC0fDfmrDbz4ULNs8Tk+fzBdfxrR2nGek/pr4PyXvB/gGJXfEwJAM4SQAAAABJRU5ErkJggg==')\",\n \"backgroundSize\": \"cover\",\n \"display\": \"block\"\n }\n }), \"\\n \", mdx(\"img\", {\n parentName: \"a\",\n \"className\": \"gatsby-resp-image-image\",\n \"alt\": \"快速排序\",\n \"title\": \"快速排序\",\n \"src\": \"/static/8aea9fd4357d84d98d236c61713ced00/dd457/quick_sort.png\",\n \"srcSet\": [\"/static/8aea9fd4357d84d98d236c61713ced00/2c191/quick_sort.png 259w\", \"/static/8aea9fd4357d84d98d236c61713ced00/86b01/quick_sort.png 518w\", \"/static/8aea9fd4357d84d98d236c61713ced00/dd457/quick_sort.png 561w\"],\n \"sizes\": \"(max-width: 561px) 100vw, 561px\",\n \"style\": {\n \"width\": \"100%\",\n \"height\": \"100%\",\n \"margin\": \"0\",\n \"verticalAlign\": \"middle\",\n \"position\": \"absolute\",\n \"top\": \"0\",\n \"left\": \"0\"\n },\n \"loading\": \"lazy\"\n }), \"\\n \"), \"\\n \"), \"\\n \", mdx(\"figcaption\", {\n parentName: \"figure\",\n \"className\": \"gatsby-resp-image-figcaption\"\n }, \"\\u5FEB\\u901F\\u6392\\u5E8F\"), \"\\n \")), mdx(\"h3\", null, \"Chrome_80 / V8_v8.0\"), mdx(\"p\", null, \"Stack Overflow \\u6709\\u6307\\u5411\\u6587\\u7AE0 \", mdx(\"a\", {\n parentName: \"p\",\n \"href\": \"https://v8.dev/blog/array-sort\"\n }, \"\\u5B98\\u65B9\\u535A\\u5BA2\"), \" \\uFF0C\\u660E\\u786E\\u8BF4\\u4E86:\"), mdx(\"blockquote\", null, mdx(\"p\", {\n parentName: \"blockquote\"\n }, \"Array.prototype.sort was among the last builtins implemented in self-hosted JavaScript in V8. Porting it offered us the opportunity to experiment with different algorithms and implementation strategies and finally make it stable in V8 v7.0 / Chrome 70.\")), mdx(\"p\", null, \"V8 7.0 \\u5C06\\u6392\\u5E8F\\u7B97\\u6CD5\\u6539\\u6210\\u4E86\\u7A33\\u5B9A\\u6392\\u5E8F\\u3002\"), mdx(\"p\", null, \"\\u5728\\u6211\\u4EEC\\u6D4B\\u8BD5\\u7684 v8 8.0 sort \\u4E2D\\uFF1A\"), mdx(\"p\", null, \"V8 \\u65B0\\u6392\\u5E8F\\uFF1A\", mdx(\"a\", {\n parentName: \"p\",\n \"href\": \"https://github.com/v8/v8/blob/8.0-lkgr/third_party/v8/builtins/array-sort.tq\"\n }, \"https://github.com/v8/v8/blob/8.0-lkgr/third_party/v8/builtins/array-sort.tq\")), mdx(\"p\", null, \"\\u5177\\u4F53\\u5C31\\u4E0D\\u5206\\u6790\\u4E86\\uFF0Ctq \\u8BED\\u8A00\\u4E5F\\u6CA1\\u6709\\u9AD8\\u4EAE\\uFF0C\\u53CD\\u6B63\\u5C31\\u662F\\u7B97\\u6CD5\\u7684\\u5B9E\\u73B0\\u53D8\\u66F4\\u4E86\\uFF1A\"), mdx(\"p\", null, mdx(\"figure\", {\n parentName: \"p\",\n \"className\": \"gatsby-resp-image-figure\",\n \"style\": {}\n }, \"\\n \", mdx(\"span\", {\n parentName: \"figure\",\n \"className\": \"gatsby-resp-image-wrapper\",\n \"style\": {\n \"position\": \"relative\",\n \"display\": \"block\",\n \"marginLeft\": \"auto\",\n \"marginRight\": \"auto\",\n \"maxWidth\": \"627px\"\n }\n }, \"\\n \", mdx(\"a\", {\n parentName: \"span\",\n \"className\": \"gatsby-resp-image-link\",\n \"href\": \"/static/6600d5b9e667ea78966ebc4e58514496/e2524/new-sort.png\",\n \"style\": {\n \"display\": \"block\"\n },\n \"target\": \"_blank\",\n \"rel\": [\"noopener\"]\n }, \"\\n \", mdx(\"span\", {\n parentName: \"a\",\n \"className\": \"gatsby-resp-image-background-image\",\n \"style\": {\n \"paddingBottom\": \"66.02316602316603%\",\n \"position\": \"relative\",\n \"bottom\": \"0\",\n \"left\": \"0\",\n \"backgroundImage\": \"url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAANCAYAAACpUE5eAAAACXBIWXMAAAsSAAALEgHS3X78AAAB10lEQVQ4y4WT25KbMBBE/f9Vech/5ItSu2yMMQiEuImbwLgzPbbKzstGVVOALs2ZntFpXVfcbjdM04S8KGCthSlLXPMcZVkhzwuklwx17dD3Pdq2k2jhXINh8Ljf74iD76dlWVSwHwak6QVJ8oXPJEF2zZFlVxhTou06eD9iHCcVHWQvQeZ51ncG5zlO6xqw77uqk7IwRolIUFaVCHkRGvUQRTsRb5pWBAY0Qsp5rlPwOI4HIQUZXKwqi/M5VVKmSxs+PhNchLaTQ9zPICEBtm3Ts/xWQRIyZU6SiCJnSZ3+0cuiMDrH1BkkpCDJow0knKb55eEmYhSNxSClClJE5ihYSbFYGK7RW/6UP4vE87zgoGAILw9p8iTBAvHZdb0SPWi8WvK/caIIfSAhCWg4KbS6bI+mUZJIPYpvLJiXNGOrvIcSUoyG0mR6oZWTd5I657Tf+COux8pyfxT8lpApsnWsrbX/WGXSco6EnIsA72Qi/SJ8eAgs64YQ2EKPm8MOYGqR5rsRQd8IN/HLSGqkM8/rVT/DCb2VNacxTaN+e89b0sv58CRkY/Mu79Lc4QPZ5SfOf37AFL9Q2y90TYLGJSjNb/ghlT0GYcn/eW6hwLFXwFHjflj8BUa95hkUmMo9AAAAAElFTkSuQmCC')\",\n \"backgroundSize\": \"cover\",\n \"display\": \"block\"\n }\n }), \"\\n \", mdx(\"img\", {\n parentName: \"a\",\n \"className\": \"gatsby-resp-image-image\",\n \"alt\": \"新方法的定义位置\",\n \"title\": \"新方法的定义位置\",\n \"src\": \"/static/6600d5b9e667ea78966ebc4e58514496/e2524/new-sort.png\",\n \"srcSet\": [\"/static/6600d5b9e667ea78966ebc4e58514496/2c191/new-sort.png 259w\", \"/static/6600d5b9e667ea78966ebc4e58514496/86b01/new-sort.png 518w\", \"/static/6600d5b9e667ea78966ebc4e58514496/e2524/new-sort.png 627w\"],\n \"sizes\": \"(max-width: 627px) 100vw, 627px\",\n \"style\": {\n \"width\": \"100%\",\n \"height\": \"100%\",\n \"margin\": \"0\",\n \"verticalAlign\": \"middle\",\n \"position\": \"absolute\",\n \"top\": \"0\",\n \"left\": \"0\"\n },\n \"loading\": \"lazy\"\n }), \"\\n \"), \"\\n \"), \"\\n \", mdx(\"figcaption\", {\n parentName: \"figure\",\n \"className\": \"gatsby-resp-image-figcaption\"\n }, \"\\u65B0\\u65B9\\u6CD5\\u7684\\u5B9A\\u4E49\\u4F4D\\u7F6E\"), \"\\n \")), mdx(\"p\", null, mdx(\"figure\", {\n parentName: \"p\",\n \"className\": \"gatsby-resp-image-figure\",\n \"style\": {}\n }, \"\\n \", mdx(\"span\", {\n parentName: \"figure\",\n \"className\": \"gatsby-resp-image-wrapper\",\n \"style\": {\n \"position\": \"relative\",\n \"display\": \"block\",\n \"marginLeft\": \"auto\",\n \"marginRight\": \"auto\",\n \"maxWidth\": \"636px\"\n }\n }, \"\\n \", mdx(\"a\", {\n parentName: \"span\",\n \"className\": \"gatsby-resp-image-link\",\n \"href\": \"/static/ee7d33898a43225dc547e47a88c7f178/e3b6e/tim-sort.png\",\n \"style\": {\n \"display\": \"block\"\n },\n \"target\": \"_blank\",\n \"rel\": [\"noopener\"]\n }, \"\\n \", mdx(\"span\", {\n parentName: \"a\",\n \"className\": \"gatsby-resp-image-background-image\",\n \"style\": {\n \"paddingBottom\": \"67.95366795366795%\",\n \"position\": \"relative\",\n \"bottom\": \"0\",\n \"left\": \"0\",\n \"backgroundImage\": \"url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAOCAYAAAAvxDzwAAAACXBIWXMAAAsSAAALEgHS3X78AAAB70lEQVQ4y41Ti47iMAzk/79vxe7eAttC32nTd2ihMOsxDeKkk/YiWYndZDweu5vzNGO5NmjrPZJ4izh6Q559IE22KPJPdE0AW+3QdwFM/geNPahfmS90bYDSSKw+YOhC4FZgM44jbrcbLpcLyrJCEIYwZQljSvWryuJ+v+N/Fq9tzuezAtJG50CfNk2T2jAMmOdZYtO6P77Rd07u8izmkwpDh2V5MIziRBge8R2EiKIYaZYhSVNlXFmLojBIkhR5USCQO9bWmoBJSUgBGSA6s7JEY4w+rOtaGdH6vldjckpE6wWEb/4u+f7QkIdB9uPphOPxhO37B0JhSr9uGmVHVmmWS7JCfVrTtMrQiV2vV89wetL1H8mm6zplwe/LskhZowK0bavJqdssMvFeXTfqrxqO+oCLZ99hS82k/EYATlGkjPiQoJSD97R0Sa5aekDq4BmSBUvLpDSWziZRV22GNIdNIigBW2FGppSk7weVTTVkmZ4hy/na7bDfH5671zUW8FB2+pwCJrWrtoyxmWT9ZEh0jg410046p4kYo5Zkz47/tjZufUhAPmBTdIA51DoiTkGZmHECd2vTGPfj8iz5VUPqQa2oW54Xj7ksSxWdA03L8lwHmbq9Av6TIf9bGrUhSNt2WjrPftC93q/D/Lp+AMUhNHkmeNkQAAAAAElFTkSuQmCC')\",\n \"backgroundSize\": \"cover\",\n \"display\": \"block\"\n }\n }), \"\\n \", mdx(\"img\", {\n parentName: \"a\",\n \"className\": \"gatsby-resp-image-image\",\n \"alt\": \"Tim 排序的算法实现\",\n \"title\": \"Tim 排序的算法实现\",\n \"src\": \"/static/ee7d33898a43225dc547e47a88c7f178/e3b6e/tim-sort.png\",\n \"srcSet\": [\"/static/ee7d33898a43225dc547e47a88c7f178/2c191/tim-sort.png 259w\", \"/static/ee7d33898a43225dc547e47a88c7f178/86b01/tim-sort.png 518w\", \"/static/ee7d33898a43225dc547e47a88c7f178/e3b6e/tim-sort.png 636w\"],\n \"sizes\": \"(max-width: 636px) 100vw, 636px\",\n \"style\": {\n \"width\": \"100%\",\n \"height\": \"100%\",\n \"margin\": \"0\",\n \"verticalAlign\": \"middle\",\n \"position\": \"absolute\",\n \"top\": \"0\",\n \"left\": \"0\"\n },\n \"loading\": \"lazy\"\n }), \"\\n \"), \"\\n \"), \"\\n \", mdx(\"figcaption\", {\n parentName: \"figure\",\n \"className\": \"gatsby-resp-image-figcaption\"\n }, \"Tim \\u6392\\u5E8F\\u7684\\u7B97\\u6CD5\\u5B9E\\u73B0\"), \"\\n \")), mdx(\"h2\", null, \"\\u6700\\u540E\"), mdx(\"p\", null, \"\\u6700\\u540E\\u5C31\\u662F\\u8FD9\\u4E2A\\u6392\\u5E8F\\u7B97\\u6CD5\\u7684\\u5B9E\\u73B0\\u5386\\u53F2\\uFF0C\\u4E0D\\u80FD\\u4F9D\\u9760\\u6392\\u5E8F\\u7B97\\u6CD5\\u7684\\u8FC7\\u7A0B\\u9ED1\\u76D2\\u6765\\u53C2\\u4E0E\\u4E1A\\u52A1\\u5185\\u5BB9\\u3002\"), mdx(\"hr\", null), mdx(\"h2\", null, \"\\u6CA1\\u60F3\\u5230\\u8FD8\\u80FD\\u6765\\u4E00\\u4E2A\\u540E\\u7EED\"), mdx(\"blockquote\", null, mdx(\"p\", {\n parentName: \"blockquote\"\n }, \"2022.8\")), mdx(\"blockquote\", null, mdx(\"p\", {\n parentName: \"blockquote\"\n }, \"\\u8BBA\\uFF1A\\u5982\\u4F55\\u62EF\\u6551\\u4E00\\u4E2A\\u6FD2\\u4E34\\u5D29\\u6E83\\u7684\\u5B9E\\u4E60\\u751F\")), mdx(\"h3\", null, \"bug\"), mdx(\"p\", null, \"\\u6700\\u8FD1\\u7528\\u6237\\u4E0A\\u62A5\\u6765\\u4E86\\u4E00\\u4E2A\\u65B0\\u7684\\u9875\\u9762\\u6E38\\u620F\\u7684 Bug\\uFF0C\\u662F\\u5B9E\\u4E60\\u751F\\u6700\\u8FD1\\u63D0\\u4EA4\\u7684\\uFF0C\\u6D4B\\u8BD5\\u7684\\u65F6\\u5019\\u53EF\\u80FD\\u4E0D\\u662F\\u5F88\\u8BA4\\u771F\\uFF0C\\u5BFC\\u81F4 Bug \\u6D41\\u5230\\u4E86\\u7EBF\\u4E0A\\uFF0C\\u5148\\u4E0B\\u7EBF\\u628A Bug \\u6307\\u7ED9\\u4E86\\u5B9E\\u4E60\\u751F\\u3002\"), mdx(\"p\", null, \"\\u63CF\\u8FF0\\u4E0B\\u95EE\\u9898\\uFF0C\\u623F\\u4E3B\\u4F1A\\u5728\\u5BA2\\u6237\\u7AEF\\u751F\\u6210\\u4E00\\u4E2A\\u6E38\\u620F\\u5730\\u56FE\\uFF0C\\u5305\\u542B\\u968F\\u673A\\u7684\\u96F7\\u70B9\\uFF0C\\u7528\\u6237\\u626B\\u96F7\\u5F97\\u5206\\u3002\\u51FA\\u95EE\\u9898\\u7684\\u7528\\u6237\\u751F\\u6210\\u7684\\u5730\\u56FE\\u4F1A\\u6709\\u5F88\\u5947\\u602A\\u7684\\u5E03\\u5C40\\uFF0C\\u5C31\\u662F\\u90A3\\u4E9B\\u96F7\\u5927\\u90E8\\u5206\\u90FD\\u5206\\u5E03\\u5728\\u5730\\u56FE\\u6700\\u5E95\\u90E8\\u4E24\\u5C42\\uFF0C\\u6709\\u968F\\u673A\\u6027\\uFF0C\\u4F46\\u662F\\u975E\\u5E38\\u5927\\u6982\\u7387\\u4F1A\\u96C6\\u4E2D\\u5728\\u90A3\\u4E24\\u5C42\\uFF0C\\u5F88\\u660E\\u663E\\u662F\\u4E2A Bug\\u3002\"), mdx(\"p\", null, \"\\u95EE\\u9898\\u7684\\u5173\\u952E\\u662F\\uFF1A\\u4ED6\\u76EF\\u7740\\u81EA\\u5DF1\\u7684\\u4EE3\\u7801\\uFF0C\\u5305\\u62EC\\u8EAB\\u8FB9\\u7684\\u540C\\u4E8B\\u5E2E\\u4ED6 Review \\u4EE3\\u7801\\u90FD\\u6CA1\\u6709\\u53D1\\u73B0\\u903B\\u8F91\\u4E0A\\u6709\\u4EC0\\u4E48\\u5927\\u7684\\u95EE\\u9898\\uFF0C\\u603B\\u4E0D\\u80FD\\u8BF4\\u51FA\\u95EE\\u9898\\u7684\\u7528\\u6237\\u771F\\u7684\\u968F\\u673A\\u5230\\u4E86\\u90A3\\u4E2A\\u4E0D\\u968F\\u673A\\u7684\\u5730\\u56FE\\u5427\\u3002\"), mdx(\"p\", null, \"\\u5B9E\\u4E60\\u751F\\u505A\\u7684\\u6E38\\u620F\\u672C\\u8EAB\\u662F\\u6CA1\\u95EE\\u9898\\u7684\\uFF0C\\u4E0D\\u7136\\u6D4B\\u8BD5\\u4E5F\\u4E0D\\u53EF\\u80FD\\u901A\\u8FC7\\uFF0C\\u6240\\u4EE5\\u4ED6\\u81EA\\u5DF1\\u63A5\\u7740\\u6D4B\\u4E86\\u5F88\\u591A\\u904D\\uFF0C\\u6CA1\\u590D\\u73B0\\u51FA\\u95EE\\u9898\\uFF0C\\u53C8\\u95EE\\u8BE2\\u4E86\\u51FA\\u95EE\\u9898\\u7684\\u7528\\u6237\\u53CD\\u9988\\uFF0C\\u53D1\\u73B0\\u51FA\\u95EE\\u9898\\u7684\\u662F IOS \\u7528\\u6237\\uFF0C\\u501F\\u6765\\u4E86 Iphone \\u6D4B\\u8BD5\\u673A\\u6D4B\\u4E86\\u4E0B\\u53D1\\u73B0\\u51FA\\u73B0\\u4E86\\u95EE\\u9898\\u3002\"), mdx(\"p\", null, mdx(\"figure\", {\n parentName: \"p\",\n \"className\": \"gatsby-resp-image-figure\",\n \"style\": {}\n }, \"\\n \", mdx(\"span\", {\n parentName: \"figure\",\n \"className\": \"gatsby-resp-image-wrapper\",\n \"style\": {\n \"position\": \"relative\",\n \"display\": \"block\",\n \"marginLeft\": \"auto\",\n \"marginRight\": \"auto\",\n \"maxWidth\": \"372px\"\n }\n }, \"\\n \", mdx(\"a\", {\n parentName: \"span\",\n \"className\": \"gatsby-resp-image-link\",\n \"href\": \"/static/ee2b5148b9d636b2fdd8f99f89f4db22/328a4/134124.jpg\",\n \"style\": {\n \"display\": \"block\"\n },\n \"target\": \"_blank\",\n \"rel\": [\"noopener\"]\n }, \"\\n \", mdx(\"span\", {\n parentName: \"a\",\n \"className\": \"gatsby-resp-image-background-image\",\n \"style\": {\n \"paddingBottom\": \"233.97683397683394%\",\n \"position\": \"relative\",\n \"bottom\": \"0\",\n \"left\": \"0\",\n \"backgroundImage\": \"url('data:image/jpeg;base64,/9j/2wBDABALDA4MChAODQ4SERATGCgaGBYWGDEjJR0oOjM9PDkzODdASFxOQERXRTc4UG1RV19iZ2hnPk1xeXBkeFxlZ2P/2wBDARESEhgVGC8aGi9jQjhCY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2P/wgARCAAvABQDASIAAhEBAxEB/8QAFgABAQEAAAAAAAAAAAAAAAAAAAIF/8QAFAEBAAAAAAAAAAAAAAAAAAAAAP/aAAwDAQACEAMQAAAB3LiwCaiwCLiwD//EABcQAQEBAQAAAAAAAAAAAAAAABABMUH/2gAIAQEAAQUCjNIzTpNP/8QAFBEBAAAAAAAAAAAAAAAAAAAAIP/aAAgBAwEBPwFf/8QAFBEBAAAAAAAAAAAAAAAAAAAAIP/aAAgBAgEBPwFf/8QAFBABAAAAAAAAAAAAAAAAAAAAQP/aAAgBAQAGPwIX/8QAGhAAAwEAAwAAAAAAAAAAAAAAARARIQAxYf/aAAgBAQABPyGqX4PsWGmLxUWn/9oADAMBAAIAAwAAABCzwjyTz//EABQRAQAAAAAAAAAAAAAAAAAAACD/2gAIAQMBAT8QX//EABQRAQAAAAAAAAAAAAAAAAAAACD/2gAIAQIBAT8QX//EAB4QAQADAAEFAQAAAAAAAAAAAAEAEVEQMWFxgZGh/9oACAEBAAE/EKGWzJfZ+QiRCq25ZpxSp65KMOAsKHZTv5CVNsrAng/INxqq98//2Q==')\",\n \"backgroundSize\": \"cover\",\n \"display\": \"block\"\n }\n }), \"\\n \", mdx(\"img\", {\n parentName: \"a\",\n \"className\": \"gatsby-resp-image-image\",\n \"alt\": \"简单结果\",\n \"title\": \"简单结果\",\n \"src\": \"/static/ee2b5148b9d636b2fdd8f99f89f4db22/328a4/134124.jpg\",\n \"srcSet\": [\"/static/ee2b5148b9d636b2fdd8f99f89f4db22/fca29/134124.jpg 259w\", \"/static/ee2b5148b9d636b2fdd8f99f89f4db22/328a4/134124.jpg 372w\"],\n \"sizes\": \"(max-width: 372px) 100vw, 372px\",\n \"style\": {\n \"width\": \"100%\",\n \"height\": \"100%\",\n \"margin\": \"0\",\n \"verticalAlign\": \"middle\",\n \"position\": \"absolute\",\n \"top\": \"0\",\n \"left\": \"0\"\n },\n \"loading\": \"lazy\"\n }), \"\\n \"), \"\\n \"), \"\\n \", mdx(\"figcaption\", {\n parentName: \"figure\",\n \"className\": \"gatsby-resp-image-figcaption\"\n }, \"\\u7B80\\u5355\\u7ED3\\u679C\"), \"\\n \")), mdx(\"p\", null, \"\\u5F88\\u795E\\u5947\\u7684\\u6D4B\\u51FA\\u4E86\\u7ED3\\u679C\\uFF0C\\u5C31\\u662F\\u5730\\u56FE\\u751F\\u6210\\u7ED3\\u679C\\u51FA\\u73B0\\u4E86\\u95EE\\u9898\\u3002\"), mdx(\"p\", null, \"\\u539F\\u8BDD\\uFF1A\\u201C\\u751F\\u621080\\u4E2A\\u5751\\u4F4D\\u7684\\u6BCF\\u4E2A\\u53F7\\u724C\\uFF0C\\u7136\\u540E\\u628A\\u8FD9\\u4E9B\\u53F7\\u724C\\u6253\\u4E71\\uFF0C\\u62FF\\u51FA\\u524D25\\u4E2A\\u53F7\\u724C\\uFF0C\\u751F\\u6210\\u5B9E\\u9645\\u5730\\u56FE\\u7684\\u65F6\\u5019\\u5728\\u5BF9\\u5E94\\u4F4D\\u7F6E\\u4E0A\\u653E\\u4E0A\\u5730\\u96F7\\u3002\\u201D\\uFF0C\\u5176\\u5B9E\\u7B97\\u6CD5\\u672C\\u8EAB\\u7684\\u63CF\\u8FF0\\u6CA1\\u95EE\\u9898\\uFF0C\\u76F4\\u63A5\\u7ED9 80 \\u4E2A\\u5751\\u4F4D\\u524D25\\u4E2A\\u4F4D\\u7F6E\\u653E\\u96F7\\u540E\\u518D\\u6253\\u4E71\\u4E5F\\u662F\\u540C\\u6837\\u7684\\u6548\\u679C\\uFF0C\\u53F7\\u724C\\u7684\\u903B\\u8F91\\u4E0D\\u5F71\\u54CD\\u6838\\u5FC3\\u7B97\\u6CD5\\u3002\"), mdx(\"p\", null, \"\\u539F\\u8BDD\\u662F\\u6CA1\\u95EE\\u9898\\u7684\\uFF0C\\u5B9E\\u73B0\\u5176\\u5B9E\\u8BF4\\u8D77\\u6765\\u4E5F\\u95EE\\u9898\\u4E0D\\u5927\\uFF0C\\u4EE3\\u7801\\u867D\\u7136\\u5F88\\u5947\\u602A\\u4F46\\u662F\\u770B\\u8D77\\u6765\\u4E5F\\u4E0D\\u662F\\u5F88\\u5BB9\\u6613\\u51FA\\u9519\\uFF0C\\u5B9E\\u4E60\\u751F\\u6CA1\\u89C1\\u8FC7\\u8FD9\\u4E48\\u7384\\u4E4E\\u7684\\u4E8B\\uFF1A\"), mdx(\"pre\", null, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-js\"\n }, \"// \\u6574\\u7406\\u540E\\u7684\\u6838\\u5FC3\\u4EE3\\u7801\\u7247\\u6BB5\\nnew Array(80).fill(0) // \\u751F\\u6210\\u5751\\u4F4D\\n .map((_, i) => i) // \\u586B\\u53F7\\u724C\\n .sort(() => .5 - Math.random()) // \\u201C\\u6253\\u4E71\\u6392\\u5217\\u201D\\n .slice(0, 25) // \\u62BD\\u53D6\\u524D 25 \\u4E2A\\n\")), mdx(\"p\", null, \"\\u5C31\\u662F\\u7ED3\\u679C\\u7684\\u8FD9 25 \\u4E2A\\u6570\\u5B57\\uFF0C\\u5728 Safari \\u6D4F\\u89C8\\u5668\\u4E2D\\u51E0\\u4E4E\\u6BCF\\u6B21\\u751F\\u6210\\u90FD\\u4F1A\\u5305\\u542B 60-80 \\u4E4B\\u95F4\\u5BC6\\u96C6\\u7684\\u6570\\u5B57\\u5206\\u5E03\\u3002\"), mdx(\"p\", null, \"\\u5B9E\\u4E60\\u751F\\u201C\\u6392\\u9664\\u201D\\u4E86\\u81EA\\u5DF1\\u7684\\u95EE\\u9898\\u540E\\uFF0C\\u60F3\\u786E\\u8BA4\\u4E0B\\u662F\\u4E0D\\u662F\\u8FD9\\u4E9B\\u5185\\u7F6E\\u51FD\\u6570\\u7684\\u95EE\\u9898\\uFF0C\\u4E8E\\u662F\\u4E00\\u8D77\\u8BA8\\u8BBA\\u4E86\\u4E0B\\u3002\"), mdx(\"h3\", null, \"\\u7ED3\\u8BBA\\u548C\\u539F\\u56E0\"), mdx(\"p\", null, \"\\u5148\\u8BF4\\u6700\\u7EC8\\u7684\\u7ED3\\u8BBA\\uFF1A\"), mdx(\"p\", null, mdx(\"strong\", {\n parentName: \"p\"\n }, \"\\u4E0D\\u53EF\\u9884\\u6D4B !== \\u5747\\u5300\\u5206\\u5E03\"), \" \\u3001\", mdx(\"strong\", {\n parentName: \"p\"\n }, \"\\u968F\\u673A !== \\u5747\\u5300\\u5206\\u5E03\"), \" \\u3001\", mdx(\"strong\", {\n parentName: \"p\"\n }, \"\\u968F\\u673A !== \\u4E0D\\u53EF\\u9884\\u6D4B\")), mdx(\"p\", null, \"\\u6240\\u4EE5\\uFF1A\\u8FD9\\u4E2A\\u6D17\\u724C\\u7B97\\u6CD5\\u662F\\u4E0D\\u5BF9\\u7684\\uFF0C\\u4E0D\\u662F random \\u7684\\u968F\\u673A\\u4E0D\\u591F\\uFF0C\\u800C\\u662F sort \\u7684\\u6BD4\\u8F83\\u4E0D\\u5145\\u5206\\u3002\"), mdx(\"p\", null, \"\\u4ECE\\u6027\\u80FD\\u7684\\u89D2\\u5EA6\\u6765\\u8BF4\\uFF0C\\u9762\\u5BF9\\u7684\\u662F\\u786E\\u5B9A\\u7ED3\\u679C\\u7684\\u6BD4\\u8F83\\u51FD\\u6570\\uFF0C\\u6392\\u5E8F\\u7B97\\u6CD5\\u672C\\u8EAB\\u8FFD\\u6C42\\u7684\\u4E5F\\u662F\\u5143\\u7D20\\u6BD4\\u8F83\\u548C\\u6392\\u5217\\u7684\\u6B21\\u6570\\u8D8A\\u5C11\\u8D8A\\u597D\\uFF0C\\u56E0\\u6B64\\u4E24\\u4E24\\u6BD4\\u8F83\\u4E00\\u5B9A\\u4F1A\\u4E25\\u91CD\\u4E0D\\u5145\\u5206\\uFF0C\\u6392\\u5E8F\\u7684\\u590D\\u6742\\u5EA6\\u8D8A\\u4F4E\\uFF0C\\u90A3\\u4E48\\u6BD4\\u8F83\\u7684\\u5360\\u6BD4\\u5C31\\u8D8A\\u5C11\\uFF0C\\u5BFC\\u81F4\\u4E86\\u5143\\u7D20\\u7684\\u5206\\u5E03\\u4E0D\\u5747\\u5300\\u3002\"), mdx(\"p\", null, \"\\u6240\\u4EE5\\u4F7F\\u7528 random \\u4F5C\\u4E3A\\u6BD4\\u8F83\\u7ED3\\u679C\\u80FD\\u591F\\u8BA9 sort \\u53D8\\u5F97\\u968F\\u673A\\uFF0C\\u4F46\\u662F\\u5206\\u5E03\\u95EE\\u9898\\u8FD8\\u662F\\u4F9D\\u8D56\\u4E8E\\u6BD4\\u8F83\\u7B97\\u6CD5\\u7684\\u5B9E\\u73B0\\u8FC7\\u7A0B\\u9ED1\\u76D2\\u3002\"), mdx(\"p\", null, \"\\u76F8\\u5173\\u7684 sort \\u51FD\\u6570\\uFF0C\\u5728\\u4E0D\\u540C\\u7684\\u6D4F\\u89C8\\u5668\\u5185\\u6838\\u4E2D\\u6709\\u4E0D\\u540C\\u7684\\u5B9E\\u73B0\\uFF0C\\u6700\\u6838\\u5FC3\\u7684\\u8FD8\\u662F\\u4E24\\u4E24\\u6BD4\\u8F83\\uFF0C\\u5176\\u5B9E\\u4ED4\\u7EC6\\u60F3\\u4E00\\u4E0B\\u4E5F\\u80FD\\u591F\\u660E\\u767D\\u786E\\u5B9A\\u5927\\u5C0F\\u4E4B\\u540E\\u7684\\u6392\\u5217\\u79FB\\u52A8\\u8FC7\\u7A0B\\u80AF\\u5B9A\\u4E0D\\u4F1A\\u9891\\u7E41\\u53D1\\u751F\\u3002\"), mdx(\"p\", null, \"\\u5176\\u4E2D\\u7684\\u6838\\u5FC3\\u903B\\u8F91\\uFF1A\"), mdx(\"pre\", null, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-js\"\n }, \"numberList.sort(() => .5 - Math.random())\\n\")), mdx(\"p\", null, \"\\u5C31\\u8FD9\\u4E48\\u8DD1\\u4E00\\u904D\\uFF0C\\u5B9E\\u9645\\u4E0A\\u662F\\u5F97\\u4E0D\\u51FA\\u6765\\u771F\\u7684\\u968F\\u673A\\u5206\\u5E03\\u7684\\uFF0C\\u5C24\\u5176\\u662F Safari \\u6D4F\\u89C8\\u5668\\u4E0A\\u3002\\u53EF\\u4EE5\\u6D4B\\u8BD5\\u4E0B\\u9762\\u8FD9\\u6BB5\\u4EE3\\u7801\\u7684\\u591A\\u6B21\\u8FD0\\u884C\\u7ED3\\u679C\\uFF0C\\u6216\\u8005\\u6536\\u96C6\\u591A\\u6B21\\u6392\\u5E8F\\u540E\\u7684\\u5206\\u5E03\\u89C4\\u5F8B\\uFF0C\\u4F1A\\u663E\\u793A\\u51FA\\u8FC7\\u7A0B\\u4E2D\\u6BD4\\u8F83\\u5927\\u7684\\u201C\\u5957\\u8DEF\\u201D\\u6027\\uFF1A\"), mdx(\"pre\", null, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-js\"\n }, \"new Array(80).fill(0).map((a, b) => b).sort((a, b) => {\\n console.log(a, b)\\n return .5 - Math.random()\\n})\\n\")), mdx(\"h3\", null, \"\\u89E3\\u51B3\\u65B9\\u6848\"), mdx(\"h4\", null, \"1. \\u591A\\u6BD4\\u8F83\\u51E0\\u6B21\"), mdx(\"p\", null, \"\\u6700\\u7B80\\u5355\\u4F4E\\u6210\\u672C\\u7684\\uFF1A\\u591A\\u8DD1\\u51E0\\u6B21 sort\\uFF0C\\u8BA9\\u4E4B\\u524D\\u6CA1\\u78B0\\u9762\\u7684\\u5143\\u7D20\\u6709\\u66F4\\u5927\\u7684\\u6982\\u7387\\u78B0\\u5230\\uFF0C\\u6765\\u968F\\u673A\\u4EA4\\u6362\\u3002\"), mdx(\"p\", null, \"\\u76F8\\u540C\\u7684\\u7B97\\u6CD5\\uFF0C\\u591A\\u8C03\\u7528\\u51E0\\u6B21 sort\\uFF0C\\u5728\\u603B\\u5143\\u7D20\\u6570\\u4E0D\\u5927\\u7684\\u524D\\u63D0\\u4E0B\\uFF0C\\u5373\\u65F6\\u4E0D\\u662F\\u5747\\u5300\\u6392\\u5E03\\u4E5F\\u662F\\u4F1A\\u6BD4\\u5355\\u6B21\\u6BD4\\u8F83\\u5145\\u5206\\u5F97\\u591A\\uFF1A\"), mdx(\"pre\", null, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-js\"\n }, \"// \\u6574\\u7406\\u540E\\u7684\\u6838\\u5FC3\\u4EE3\\u7801\\u7247\\u6BB5\\nnew Array(80).fill(0).map((_, i) => i)\\n .sort(() => .5 - Math.random())\\n .sort(() => .5 - Math.random())\\n .sort(() => .5 - Math.random())\\n .sort(() => .5 - Math.random())\\n .sort(() => .5 - Math.random())\\n .sort(() => .5 - Math.random())\\n .sort(() => .5 - Math.random())\\n .slice(0, 25)\\n\")), mdx(\"p\", null, mdx(\"figure\", {\n parentName: \"p\",\n \"className\": \"gatsby-resp-image-figure\",\n \"style\": {}\n }, \"\\n \", mdx(\"span\", {\n parentName: \"figure\",\n \"className\": \"gatsby-resp-image-wrapper\",\n \"style\": {\n \"position\": \"relative\",\n \"display\": \"block\",\n \"marginLeft\": \"auto\",\n \"marginRight\": \"auto\",\n \"maxWidth\": \"394px\"\n }\n }, \"\\n \", mdx(\"a\", {\n parentName: \"span\",\n \"className\": \"gatsby-resp-image-link\",\n \"href\": \"/static/ff97021208195e9b8e0449f613490afe/be7c1/134607.jpg\",\n \"style\": {\n \"display\": \"block\"\n },\n \"target\": \"_blank\",\n \"rel\": [\"noopener\"]\n }, \"\\n \", mdx(\"span\", {\n parentName: \"a\",\n \"className\": \"gatsby-resp-image-background-image\",\n \"style\": {\n \"paddingBottom\": \"203.4749034749035%\",\n \"position\": \"relative\",\n \"bottom\": \"0\",\n \"left\": \"0\",\n \"backgroundImage\": \"url('data:image/jpeg;base64,/9j/2wBDABALDA4MChAODQ4SERATGCgaGBYWGDEjJR0oOjM9PDkzODdASFxOQERXRTc4UG1RV19iZ2hnPk1xeXBkeFxlZ2P/2wBDARESEhgVGC8aGi9jQjhCY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2P/wgARCAApABQDASIAAhEBAxEB/8QAFgABAQEAAAAAAAAAAAAAAAAAAAIF/8QAFAEBAAAAAAAAAAAAAAAAAAAAAP/aAAwDAQACEAMQAAAB3LiwCamgCamgD//EABYQAQEBAAAAAAAAAAAAAAAAAAEQMf/aAAgBAQABBQIpSlKbP//EABQRAQAAAAAAAAAAAAAAAAAAACD/2gAIAQMBAT8BX//EABQRAQAAAAAAAAAAAAAAAAAAACD/2gAIAQIBAT8BX//EABQQAQAAAAAAAAAAAAAAAAAAAED/2gAIAQEABj8CF//EABgQAAMBAQAAAAAAAAAAAAAAAAEQMQAR/9oACAEBAAE/IaO4qLoui6Lo/wD/2gAMAwEAAgADAAAAEKPAPFPP/8QAFBEBAAAAAAAAAAAAAAAAAAAAIP/aAAgBAwEBPxBf/8QAFBEBAAAAAAAAAAAAAAAAAAAAIP/aAAgBAgEBPxBf/8QAHRABAAMAAQUAAAAAAAAAAAAAAQARUTEQICGRof/aAAgBAQABPxAWSWSmECuJfCU78hMSstxhPFl9yzSc9NXbP//Z')\",\n \"backgroundSize\": \"cover\",\n \"display\": \"block\"\n }\n }), \"\\n \", mdx(\"img\", {\n parentName: \"a\",\n \"className\": \"gatsby-resp-image-image\",\n \"alt\": \"简单结果\",\n \"title\": \"简单结果\",\n \"src\": \"/static/ff97021208195e9b8e0449f613490afe/be7c1/134607.jpg\",\n \"srcSet\": [\"/static/ff97021208195e9b8e0449f613490afe/fca29/134607.jpg 259w\", \"/static/ff97021208195e9b8e0449f613490afe/be7c1/134607.jpg 394w\"],\n \"sizes\": \"(max-width: 394px) 100vw, 394px\",\n \"style\": {\n \"width\": \"100%\",\n \"height\": \"100%\",\n \"margin\": \"0\",\n \"verticalAlign\": \"middle\",\n \"position\": \"absolute\",\n \"top\": \"0\",\n \"left\": \"0\"\n },\n \"loading\": \"lazy\"\n }), \"\\n \"), \"\\n \"), \"\\n \", mdx(\"figcaption\", {\n parentName: \"figure\",\n \"className\": \"gatsby-resp-image-figcaption\"\n }, \"\\u7B80\\u5355\\u7ED3\\u679C\"), \"\\n \")), mdx(\"h4\", null, \"2. \\u5145\\u5206\\u4EA4\\u6362\\u4F4D\\u7F6E\"), mdx(\"p\", null, \"\\u8BA9\\u201C\\u4F4D\\u7F6E\\u201D\\u968F\\u673A\\uFF0C\\u800C\\u4E0D\\u662F\\u201C\\u6BD4\\u8F83\\u201D\\u968F\\u673A\\u3002\"), mdx(\"pre\", null, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-js\"\n }, \"// \\u627E\\u5230\\u5269\\u4E0B\\u7684\\u7A7A\\u63D2\\u69FD\\uFF0C\\u968F\\u673A\\u4E00\\u4E2A\\u4F4D\\u7F6E\\u653E\\u5165\\nvar target = new Array(80).fill(0)\\ntarget.forEach((_, ind) => {\\n const slots = target.map((v, i) => v == 0 ? i : null).filter(v => v !== null)\\n const pos = slots[Math.floor(Math.random()*slots.length)]\\n target[pos] = ind\\n})\\ntarget.slice(0, 25)\\n\")), mdx(\"p\", null, mdx(\"figure\", {\n parentName: \"p\",\n \"className\": \"gatsby-resp-image-figure\",\n \"style\": {}\n }, \"\\n \", mdx(\"span\", {\n parentName: \"figure\",\n \"className\": \"gatsby-resp-image-wrapper\",\n \"style\": {\n \"position\": \"relative\",\n \"display\": \"block\",\n \"marginLeft\": \"auto\",\n \"marginRight\": \"auto\",\n \"maxWidth\": \"472px\"\n }\n }, \"\\n \", mdx(\"a\", {\n parentName: \"span\",\n \"className\": \"gatsby-resp-image-link\",\n \"href\": \"/static/186661d8e34741f5019831d3eb3b44fa/79333/134608.jpg\",\n \"style\": {\n \"display\": \"block\"\n },\n \"target\": \"_blank\",\n \"rel\": [\"noopener\"]\n }, \"\\n \", mdx(\"span\", {\n parentName: \"a\",\n \"className\": \"gatsby-resp-image-background-image\",\n \"style\": {\n \"paddingBottom\": \"179.53667953667954%\",\n \"position\": \"relative\",\n \"bottom\": \"0\",\n \"left\": \"0\",\n \"backgroundImage\": \"url('data:image/jpeg;base64,/9j/2wBDABALDA4MChAODQ4SERATGCgaGBYWGDEjJR0oOjM9PDkzODdASFxOQERXRTc4UG1RV19iZ2hnPk1xeXBkeFxlZ2P/2wBDARESEhgVGC8aGi9jQjhCY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2P/wgARCAAkABQDASIAAhEBAxEB/8QAFgABAQEAAAAAAAAAAAAAAAAAAAIF/8QAFAEBAAAAAAAAAAAAAAAAAAAAAP/aAAwDAQACEAMQAAAB3aiwCaiwCLAD/8QAFhABAQEAAAAAAAAAAAAAAAAAARAx/9oACAEBAAEFAjYbClL/AP/EABQRAQAAAAAAAAAAAAAAAAAAACD/2gAIAQMBAT8BX//EABQRAQAAAAAAAAAAAAAAAAAAACD/2gAIAQIBAT8BX//EABQQAQAAAAAAAAAAAAAAAAAAADD/2gAIAQEABj8Cf//EABgQAAMBAQAAAAAAAAAAAAAAAAEQMQAh/9oACAEBAAE/Iabio6Loui//2gAMAwEAAgADAAAAEDPCPPPP/8QAFBEBAAAAAAAAAAAAAAAAAAAAIP/aAAgBAwEBPxBf/8QAFBEBAAAAAAAAAAAAAAAAAAAAIP/aAAgBAgEBPxBf/8QAHBAAAgIDAQEAAAAAAAAAAAAAAREAISBRkRBh/9oACAEBAAE/EEBChHsJRwlhRD73xyurl7HMd//Z')\",\n \"backgroundSize\": \"cover\",\n \"display\": \"block\"\n }\n }), \"\\n \", mdx(\"img\", {\n parentName: \"a\",\n \"className\": \"gatsby-resp-image-image\",\n \"alt\": \"简单结果\",\n \"title\": \"简单结果\",\n \"src\": \"/static/186661d8e34741f5019831d3eb3b44fa/79333/134608.jpg\",\n \"srcSet\": [\"/static/186661d8e34741f5019831d3eb3b44fa/fca29/134608.jpg 259w\", \"/static/186661d8e34741f5019831d3eb3b44fa/79333/134608.jpg 472w\"],\n \"sizes\": \"(max-width: 472px) 100vw, 472px\",\n \"style\": {\n \"width\": \"100%\",\n \"height\": \"100%\",\n \"margin\": \"0\",\n \"verticalAlign\": \"middle\",\n \"position\": \"absolute\",\n \"top\": \"0\",\n \"left\": \"0\"\n },\n \"loading\": \"lazy\"\n }), \"\\n \"), \"\\n \"), \"\\n \", mdx(\"figcaption\", {\n parentName: \"figure\",\n \"className\": \"gatsby-resp-image-figcaption\"\n }, \"\\u7B80\\u5355\\u7ED3\\u679C\"), \"\\n \")));\n}\n;\nMDXContent.isMDXComponent = true;"}}}}